Skip to main content
Theme utilities in Flet allow you to customize the visual appearance of your application. This includes color schemes, text styles, and component-specific themes.

​
ColorScheme

A set of 40+ colors based on the Material Design spec that can be used to configure the color properties of most components. 
@dataclass
class ColorScheme:
    primary: Optional[ColorValue] = None
    on_primary: Optional[ColorValue] = None
    primary_container: Optional[ColorValue] = None
    on_primary_container: Optional[ColorValue] = None
    # ... and many more

​
Primary Colors

  • primary: The color displayed most frequently across your app’s screens and components
  • on_primary: A color that’s clearly legible when drawn on primary
  • primary_container: A color used for elements needing less emphasis than primary
  • on_primary_container: A color that’s clearly legible when drawn on primary_container
  • primary_fixed: A substitute for primary_container that’s the same color for dark and light themes
  • primary_fixed_dim: A color used for elements needing more emphasis than primary_fixed
  • on_primary_fixed: Text/icons on top of primary_fixed color
  • on_primary_fixed_variant: Lower-emphasis option for text/icons than on_primary_fixed

​
Secondary Colors

  • secondary: An accent color for less prominent components
  • on_secondary: Legible color on secondary
  • secondary_container: Less emphasis than secondary
  • on_secondary_container: Legible on secondary_container
  • secondary_fixed: Same for dark/light themes
  • secondary_fixed_dim: More emphasis than secondary_fixed
  • on_secondary_fixed: Text/icons on secondary_fixed
  • on_secondary_fixed_variant: Lower emphasis option

​
Tertiary Colors

  • tertiary: Contrasting accent to balance primary and secondary
  • on_tertiary: Legible on tertiary
  • tertiary_container: Less emphasis than tertiary
  • on_tertiary_container: Legible on tertiary_container
  • tertiary_fixed: Same for dark/light themes
  • tertiary_fixed_dim: More emphasis than tertiary_fixed
  • on_tertiary_fixed: Text/icons on tertiary_fixed
  • on_tertiary_fixed_variant: Lower emphasis option

​
Error Colors

  • error: Color for input validation errors
  • on_error: Legible on error
  • error_container: Error elements with less emphasis
  • on_error_container: Legible on error_container

​
Surface Colors

  • surface: Background color for widgets like Card
  • on_surface: Legible on surface
  • on_surface_variant: Legible on surface_container_highest
  • surface_tint: Overlay to indicate elevation
  • surface_dim: Always darkest in dark or light theme
  • surface_bright: Always lightest in dark or light theme
  • surface_container: Distinct area within surface
  • surface_container_low: Lighter tone than surface_container
  • surface_container_lowest: Lightest tone, least emphasis
  • surface_container_high: Darker tone
  • surface_container_highest: Darkest tone, most emphasis

​
Utility Colors

  • outline: Creates boundaries and emphasis to improve usability
  • outline_variant: For decorative elements (dividers)
  • shadow: Color for drop shadows
  • scrim: Color for modal component backgrounds

​
Inverse Colors

  • inverse_surface: Reverse UI (e.g., in SnackBar)
  • on_inverse_surface: Legible on inverse_surface
  • inverse_primary: Highlight on inverse_surface backgrounds
Example: 
import flet as ft

def main(page: ft.Page):
    page.theme = ft.Theme(
        color_scheme=ft.ColorScheme(
            primary=ft.colors.BLUE,
            on_primary=ft.colors.WHITE,
            secondary=ft.colors.AMBER,
            on_secondary=ft.colors.BLACK,
            surface=ft.colors.GREY_100,
            on_surface=ft.colors.BLACK,
        )
    )
    
    page.add(
        ft.ElevatedButton("Primary Button"),
        ft.Card(
            content=ft.Container(
                content=ft.Text("Card on surface"),
                padding=20,
            )
        ),
    )

ft.app(target=main)

​
TextTheme

Customizes Text styles following Material 3 design system. 
@dataclass
class TextTheme:
    # Display styles - largest text, for short important text
    display_large: Optional[TextStyle] = None
    display_medium: Optional[TextStyle] = None
    display_small: Optional[TextStyle] = None
    
    # Headline styles - for short, high-emphasis text
    headline_large: Optional[TextStyle] = None
    headline_medium: Optional[TextStyle] = None
    headline_small: Optional[TextStyle] = None
    
    # Title styles - for shorter, medium-emphasis text
    title_large: Optional[TextStyle] = None
    title_medium: Optional[TextStyle] = None
    title_small: Optional[TextStyle] = None
    
    # Body styles - for longer passages of text
    body_large: Optional[TextStyle] = None
    body_medium: Optional[TextStyle] = None  # Default for Material
    body_small: Optional[TextStyle] = None
    
    # Label styles - for small UI elements like buttons
    label_large: Optional[TextStyle] = None
    label_medium: Optional[TextStyle] = None
    label_small: Optional[TextStyle] = None
Example: 
import flet as ft

def main(page: ft.Page):
    page.theme = ft.Theme(
        text_theme=ft.TextTheme(
            display_large=ft.TextStyle(
                size=57,
                weight=ft.FontWeight.W_400,
            ),
            headline_medium=ft.TextStyle(
                size=28,
                weight=ft.FontWeight.W_600,
            ),
            body_medium=ft.TextStyle(
                size=14,
                weight=ft.FontWeight.W_400,
            ),
        )
    )
    
    page.add(
        ft.Text("Display Large", theme_style=ft.TextThemeStyle.DISPLAY_LARGE),
        ft.Text("Headline Medium", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM),
        ft.Text("Body Medium", theme_style=ft.TextThemeStyle.BODY_MEDIUM),
    )

ft.app(target=main)
When to use each style:
  • Display: Hero text, large numbers, short impactful statements
  • Headline: Section headers, dialog titles
  • Title: List item titles, card headers, smaller headings
  • Body: Paragraphs, descriptions, general content
  • Label: Button text, chips, small supporting text

​
PageTransitionTheme

Controls how pages transition during navigation. 
class PageTransitionTheme(Enum):
    NONE = "none"  # No animation
    FADE_UPWARDS = "fadeUpwards"  # Android O style
    OPEN_UPWARDS = "openUpwards"  # Android P style
    ZOOM = "zoom"  # Android Q style
    CUPERTINO = "cupertino"  # iOS style
    PREDICTIVE = "predictive"  # Android predictive-back
    FADE_FORWARDS = "fadeForwards"  # Android U style

​
PageTransitionsTheme

Per-platform mapping of route transition presets. 
@dataclass
class PageTransitionsTheme:
    android: Optional[PageTransitionTheme] = None
    ios: Optional[PageTransitionTheme] = None
    linux: Optional[PageTransitionTheme] = None
    macos: Optional[PageTransitionTheme] = None
    windows: Optional[PageTransitionTheme] = None
Example: 
import flet as ft

def main(page: ft.Page):
    page.theme = ft.Theme(
        page_transitions=ft.PageTransitionsTheme(
            android=ft.PageTransitionTheme.FADE_UPWARDS,
            ios=ft.PageTransitionTheme.CUPERTINO,
            macos=ft.PageTransitionTheme.ZOOM,
            linux=ft.PageTransitionTheme.ZOOM,
            windows=ft.PageTransitionTheme.ZOOM,
        )
    )

​
Component-Specific Themes

Flet provides theme classes for customizing specific components:
  • ScrollbarTheme: Customize scrollbar appearance
  • TabBarTheme: Customize TabBar controls
  • DialogTheme: Customize AlertDialog appearance
  • ButtonTheme: Customize Button controls
  • OutlinedButtonTheme: Customize OutlinedButton
  • TextButtonTheme: Customize TextButton
  • FilledButtonTheme: Customize FilledButton
  • IconButtonTheme: Customize IconButton
  • BottomSheetTheme: Customize BottomSheet
  • CardTheme: Customize Card appearance
  • ChipTheme: Customize Chip controls
  • FloatingActionButtonTheme: Customize FAB
  • NavigationRailTheme: Customize NavigationRail
  • AppBarTheme: Customize AppBar
  • BottomAppBarTheme: Customize BottomAppBar
  • RadioTheme: Customize Radio buttons
  • CheckboxTheme: Customize Checkbox controls
  • BadgeTheme: Customize Badge appearance
  • SwitchTheme: Customize Switch controls
  • DividerTheme: Customize Divider appearance
  • SnackBarTheme: Customize SnackBar
Example: 
import flet as ft

def main(page: ft.Page):
    page.theme = ft.Theme(
        button_theme=ft.ButtonTheme(
            style=ft.ButtonStyle(
                color=ft.colors.WHITE,
                bgcolor=ft.colors.BLUE,
            )
        ),
        card_theme=ft.CardTheme(
            elevation=5,
            shadow_color=ft.colors.BLUE_200,
        ),
    )

​
SystemOverlayStyle

Customizes mobile system overlay appearance (status bar and navigation bar). 
@dataclass
class SystemOverlayStyle:
    status_bar_color: Optional[ColorValue] = None
    system_navigation_bar_color: Optional[ColorValue] = None
    system_navigation_bar_divider_color: Optional[ColorValue] = None
    enforce_system_navigation_bar_contrast: Optional[bool] = None
    enforce_system_status_bar_contrast: Optional[bool] = None
    system_navigation_bar_icon_brightness: Optional[Brightness] = None
    status_bar_brightness: Optional[Brightness] = None
    status_bar_icon_brightness: Optional[Brightness] = None
Example: 
import flet as ft

def main(page: ft.Page):
    page.theme = ft.Theme(
        system_overlay_style=ft.SystemOverlayStyle(
            status_bar_color=ft.colors.TRANSPARENT,
            status_bar_icon_brightness=ft.Brightness.DARK,
            system_navigation_bar_color=ft.colors.WHITE,
        )
    )

Build docs developers (and LLMs) love

Get started for freeTalk to us