How to make Custom Control theme aware

[Bbalduzz]

Question

How can I make a custom control responsive to theme changes, so it automatically adapts to the current page theme?
I tried using the did_mount method but that don't give me a way to listen for theme changing events.

Code sample

import flet as ft
from dataclasses import dataclass


@dataclass
class SliderColors:
    active_bar_color: str
    inactive_bar_color: str

    @staticmethod
    def dark():
        return SliderColors(active_bar_color="#1f5eff", inactive_bar_color="#323741")

    @staticmethod
    def light():
        return SliderColors(active_bar_color="#1f5eff", inactive_bar_color="#e8ebf4")


class Slider(ft.Slider):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.colors = SliderColors.light()
        self.kwargs = kwargs
        self.active_color = self.colors.active_bar_color
        self.inactive_color = self.colors.inactive_bar_color
        self.thumb_color = ft.colors.WHITE
        self.overlay_color = ft.colors.with_opacity(0, "white")

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    slider = Slider()
    page.add(slider)


ft.app(target=main)

Error message

No response

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

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

[ndonkoHenri]

Theme or ThemeMode changes?

[Bbalduzz]

I'm referring to ThemeMode changes, so switches between ThemeMode.DARK and ThemeMode.LIGHT

[Vivekananda-Mullangi]

How about adding a theme_mode argument?

Example:

import flet as ft
from dataclasses import dataclass


@dataclass
class SliderColors:
    active_bar_color: str
    inactive_bar_color: str

    @staticmethod
    def dark():
        return SliderColors(active_bar_color="#1f5eff", inactive_bar_color="#323741")

    @staticmethod
    def light():
        return SliderColors(active_bar_color="#1f5eff", inactive_bar_color="#e8ebf4")


class Slider(ft.Slider):
    def __init__(self, theme_mode=ft.ThemeMode.LIGHT, **kwargs):
        super().__init__(**kwargs)
        if theme_mode == ft.ThemeMode.LIGHT:
            self.colors = SliderColors.light()
        elif theme_mode == ft.ThemeMode.DARK:
            self.colors = SliderColors.dark()
        self.kwargs = kwargs
        self.active_color = self.colors.active_bar_color
        self.inactive_color = self.colors.inactive_bar_color
        self.thumb_color = ft.colors.WHITE
        self.overlay_color = ft.colors.with_opacity(0, "white")


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    slider = Slider(theme_mode=page.theme_mode)
    page.add(slider)


ft.app(target=main)

[Bbalduzz]

But the colors would't be applied when the page.theme_mode changes.
For example, let's say I have a button that let the user change the page theme mode:

import flet as ft

def main(page):
    def change_theme(value):
        if page.theme_mode == ft.ThemeMode.LIGHT:
            page.theme_mode = ft.ThemeMode.DARK
        else:
            page.theme_mode = ft.ThemeMode.LIGHT
        page.update()

    button = ft.OutlinedButton(
        "Change theme",
        on_click=change_theme,
    )

    page.add(button)


ft.app(target=main)

I need to be able to detect this change in a Custom Control and adapt it accordingly

[Vivekananda-Mullangi]

just add a function to Slider which takes the SliderColors and changes the active_bar_color and inactive_bar_color

Example:

import flet as ft
from dataclasses import dataclass


@dataclass
class SliderColors:
    active_bar_color: str
    inactive_bar_color: str

    @staticmethod
    def dark():
        return SliderColors(active_bar_color="#1f5eff", inactive_bar_color="#323741")

    @staticmethod
    def light():
        return SliderColors(active_bar_color="#1f5eff", inactive_bar_color="#e8ebf4")


class Slider(ft.Slider):
    def __init__(self, theme_mode=ft.ThemeMode.LIGHT, **kwargs):
        super().__init__(**kwargs)
        if theme_mode == ft.ThemeMode.LIGHT:
            self.colors = SliderColors.light()
        elif theme_mode == ft.ThemeMode.DARK:
            self.colors = SliderColors.dark()
        self.kwargs = kwargs
        self.active_color = self.colors.active_bar_color
        self.inactive_color = self.colors.inactive_bar_color
        self.thumb_color = ft.colors.WHITE
        self.overlay_color = ft.colors.with_opacity(0, "white")

    def change_theme(self, colors: SliderColors):
        self.active_color = colors.active_bar_color
        self.inactive_color = colors.inactive_bar_color


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    slider = Slider(theme_mode=page.theme_mode)
    page.add(slider)

    def change_theme(value):
        if page.theme_mode == ft.ThemeMode.LIGHT:
            page.theme_mode = ft.ThemeMode.DARK
            slider.change_theme(SliderColors.dark())
        else:
            page.theme_mode = ft.ThemeMode.LIGHT
            slider.colors = SliderColors.light()
            slider.change_theme(SliderColors.light())
        slider.update()
        page.update()

    button = ft.OutlinedButton(
        "Change theme",
        on_click=change_theme,
    )

    page.add(button)


ft.app(target=main)

[Swastik2442]

Hey, did you find a solution? The one by @vv2006-mc is specific for an object of Slider class, the slider variable, and not to the class itself.