How can I check whether the system theme is dark or light mode?

[FeodorFitsner]

Discussed in #1627

^{Originally posted by BC-clegras July 24, 2023}

Question

I have a button in my code that switches between light mode and dark mode, which works great, but I would like to know how I can check if the system theme is dark or light.

Right now, I hardcode page.theme_mode = ft.ThemeMode.LIGHT, since the code for my button assumes that the system starts in light more. I would love to use the ft.ThemeMode.SYSTEM property, but I can't figure out how to check if system means dark or light mode, and therefore there will always be a scenario where an extra click will be needed at the start if the user wants to switch between light and dark mode.

Basically, I would like to be able to know what state the app starts in so I can make the button I use for dark mode have the correct icon and tooltip at startup.

Code sample

# This button is in my app bar
ft.IconButton(
    ft.icons.DARK_MODE_ROUNDED,
    tooltip="Switch to dark mode",
    on_click=self.toggle_dark_mode,
),

# The function that gets called when the button is clicked
def toggle_dark_mode(self, e):
    if self.page.theme_mode == ft.ThemeMode.DARK:
        e.control.icon = ft.icons.DARK_MODE_ROUNDED
        e.control.tooltip = "Switch to dark mode"
        self.page.theme_mode = ft.ThemeMode.LIGHT

    else:
        e.control.icon = ft.icons.WB_SUNNY_ROUNDED
        e.control.tooltip = "Switch to light mode"
        self.page.theme_mode = ft.ThemeMode.DARK

    self.page.update()

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[andrerotband]

You can see on property bellow:

page.platform_brightness

Good luck!

[BC-clegras]

awesome, thanks a lot!