ThemeMode

Describes which theme will be used by Flet app.

Inherits: Enum

Properties

• DARK –

  Always use the dark mode (if available) regardless of system preference.

• LIGHT –

  Always use the light mode regardless of system preference.

• SYSTEM –

  Use either the light or dark theme based on what the user has selected in the system settings.

Examples

Showcase

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.SYSTEM
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def apply_theme_mode(theme_mode: ft.ThemeMode):
        page.theme_mode = theme_mode
        status.value = f"Active mode: {theme_mode.name}"
        page.update()

    def showcase_card(theme_mode: ft.ThemeMode) -> ft.Container:
        return ft.Container(
            width=250,
            padding=12,
            border=ft.Border.all(1, ft.Colors.RED),
            border_radius=10,
            bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
            content=ft.Column(
                spacing=8,
                controls=[
                    ft.Text(theme_mode.name, weight=ft.FontWeight.BOLD),
                    ft.Button(
                        "Apply",
                        on_click=lambda _, m=theme_mode: apply_theme_mode(m),
                    ),
                ],
            ),
        )

    page.appbar = ft.AppBar(title="ThemeMode Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text("Switch the app theme mode and inspect the preview below."),
                    status := ft.Text(f"Active mode: {page.theme_mode.name}"),
                    ft.Container(
                        width=500,
                        padding=12,
                        border=ft.Border.all(1, ft.Colors.OUTLINE),
                        border_radius=10,
                        content=ft.Row(
                            alignment=ft.MainAxisAlignment.SPACE_AROUND,
                            controls=[
                                ft.OutlinedButton("Outlined"),
                                ft.FilledButton("Filled"),
                                ft.Switch(label="Switch", value=True),
                            ],
                        ),
                    ),
                    ft.Row(
                        wrap=True,
                        spacing=12,
                        expand=True,
                        scroll=ft.ScrollMode.AUTO,
                        alignment=ft.MainAxisAlignment.CENTER,
                        controls=[
                            showcase_card(theme_mode) for theme_mode in ft.ThemeMode
                        ],
                    ),
                ],
            ),
        )
    )

    apply_theme_mode(ft.ThemeMode.SYSTEM)


if __name__ == "__main__":
    ft.run(main)

Properties

DARK = 'dark' class-attribute instance-attribute

Always use the dark mode (if available) regardless of system preference.

LIGHT = 'light' class-attribute instance-attribute

Always use the light mode regardless of system preference.

SYSTEM = 'system' class-attribute instance-attribute

Use either the light or dark theme based on what the user has selected in the system settings.