I'm trying to develop an app with multiple views. Each view should have a proper theme and theme mode. To solve this problem, I decided to deal with an easier one. I would like to set a page theme and theme mode, and add a container with a different theme mode or a different theme too. I found something similar into Flet references. So, I set the page theme mode to 'LIGHT', the page theme to 'BLUE' and the page dark theme to 'GREEN'. I added a button and a textfield on top of the page to evaluate the rendering. Finally, I added a container with a button and a textfield, setting its theme mode to 'DARK'. Optionally, I would like to set also a different theme to the container. Here is the code:

import flet as ft

def main(page: ft.Page):    
    page.controls.append(ft.ElevatedButton("Click me!"))
    page.controls.append(ft.TextField(hint_text="Enter text"))
    page.controls.append(
        ft.Container(
            content=ft.Column(
                [
                    ft.ElevatedButton("Click me!"),
                    ft.TextField(hint_text="Enter text"),
                ]
            ),            
            theme_mode=ft.ThemeMode.DARK,
            #theme=ft.Theme(color_scheme_seed=ft.colors.RED),
            padding=40,
            border_radius=10,
            border=ft.border.all(3, "red"),
        )
        
    )
    
    page.theme_mode = ft.ThemeMode.LIGHT
    page.theme=ft.Theme(color_scheme_seed=ft.colors.BLUE)
    page.dark_theme=ft.Theme(color_scheme_seed=ft.colors.GREEN)
    page.window_height = 700
    page.window_width = 500
    page.padding=0
    page.scroll="auto"
    page.window_left = 700
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.update()
ft.app(target=main)

And this is the output:

As you can see, nothing change into the container. How can I set a different theme mode and a different theme for both the container and its children?

I'm trying to develop an app with multiple views. Each view should have a proper theme and theme mode. To solve this problem, I decided to deal with an easier one. I would like to set a page theme and theme mode, and add a container with a different theme mode or a different theme too. I found something similar into Flet references. So, I set the page theme mode to 'LIGHT', the page theme to 'BLUE' and the page dark theme to 'GREEN'. I added a button and a textfield on top of the page to evaluate the rendering. Finally, I added a container with a button and a textfield, setting its theme mode to 'DARK'. Optionally, I would like to set also a different theme to the container. Here is the code:

import flet as ft

def main(page: ft.Page):    
    page.controls.append(ft.ElevatedButton("Click me!"))
    page.controls.append(ft.TextField(hint_text="Enter text"))
    page.controls.append(
        ft.Container(
            content=ft.Column(
                [
                    ft.ElevatedButton("Click me!"),
                    ft.TextField(hint_text="Enter text"),
                ]
            ),            
            theme_mode=ft.ThemeMode.DARK,
            #theme=ft.Theme(color_scheme_seed=ft.colors.RED),
            padding=40,
            border_radius=10,
            border=ft.border.all(3, "red"),
        )
        
    )
    
    page.theme_mode = ft.ThemeMode.LIGHT
    page.theme=ft.Theme(color_scheme_seed=ft.colors.BLUE)
    page.dark_theme=ft.Theme(color_scheme_seed=ft.colors.GREEN)
    page.window_height = 700
    page.window_width = 500
    page.padding=0
    page.scroll="auto"
    page.window_left = 700
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.update()
ft.app(target=main)

And this is the output:

As you can see, nothing change into the container. How can I set a different theme mode and a different theme for both the container and its children?

• python
• flutter
• flet

1 Answer 1

When running your code with the latest Flet version (0.26.0), I get the following instead:

When I add bgcolor=ft.colors.SURFACE_CONTAINER_HIGHEST to the inner-Container I get:

If I additionally uncomment the theme you had theme=ft.Theme(color_scheme_seed=ft.colors.RED), I get:

Hope it helps!