| 32 | |
| 33 | |
| 34 | class ToggleSwitch(ft.Container): |
| 35 | def __init__( |
| 36 | self, on_switch=None, initial_value=0, theme=ft.ThemeMode.DARK, **kwargs |
| 37 | ): |
| 38 | # Set initial toggle state and callback |
| 39 | self.colors = ( |
| 40 | ToggleSwitchColors.dark() |
| 41 | if theme == ft.ThemeMode.DARK |
| 42 | else ToggleSwitchColors.light() |
| 43 | ) |
| 44 | self.on_switch = on_switch |
| 45 | self.value = initial_value |
| 46 | |
| 47 | # Icons for moon and sun |
| 48 | self.moon_icon = ft.icons.DARK_MODE |
| 49 | self.sun_icon = ft.icons.LIGHT_MODE |
| 50 | |
| 51 | # Initialize the parent container with appearance settings |
| 52 | super().__init__( |
| 53 | width=133, |
| 54 | height=45, |
| 55 | bgcolor=self.colors.container_background_color, |
| 56 | padding=ft.padding.all(5), |
| 57 | border=ft.border.all(1, self.colors.container_border_color), |
| 58 | border_radius=10, |
| 59 | **kwargs, |
| 60 | ) |
| 61 | |
| 62 | # Set up the initial UI elements |
| 63 | self.dark_container = self.get_container(self.moon_icon, self.value == 0) |
| 64 | self.light_container = self.get_container(self.sun_icon, self.value == 1) |
| 65 | |
| 66 | # Create the main row to hold the toggles |
| 67 | self.content = ft.Row( |
| 68 | controls=[self.dark_container, self.light_container], |
| 69 | ) |
| 70 | |
| 71 | def did_mount(self): |
| 72 | self.colors = ( |
| 73 | ToggleSwitchColors.dark() |
| 74 | if self.page.theme_mode == ft.ThemeMode.DARK |
| 75 | else ToggleSwitchColors.light() |
| 76 | ) |
| 77 | self.update() |
| 78 | |
| 79 | def get_container(self, icon, active): |
| 80 | """Helper function to create individual toggle containers.""" |
| 81 | return ft.Container( |
| 82 | content=ft.Icon( |
| 83 | icon, |
| 84 | size=20, |
| 85 | color=self.colors.active_icon_color |
| 86 | if active |
| 87 | else self.colors.non_active_icon_color, |
| 88 | ), |
| 89 | width=55, |
| 90 | bgcolor=self.colors.active_switch_background_color if active else "", |
| 91 | border_radius=5, |