diff --git a/reflex/components/radix/themes/color_mode.py b/reflex/components/radix/themes/color_mode.py index 8a29d3b870..2329918f4c 100644 --- a/reflex/components/radix/themes/color_mode.py +++ b/reflex/components/radix/themes/color_mode.py @@ -23,7 +23,8 @@ from reflex.components.component import BaseComponent from reflex.components.core.cond import Cond, color_mode_cond, cond from reflex.components.lucide.icon import Icon -from reflex.style import color_mode, toggle_color_mode +from reflex.components.radix.themes.components.switch import Switch +from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode from reflex.utils import console from reflex.vars import BaseVar, Var @@ -143,11 +144,34 @@ def create( ) +class ColorModeSwitch(Switch): + """Switch for toggling light / dark mode via toggle_color_mode.""" + + @classmethod + def create(cls, *children, **props): + """Create a switch component bound to color_mode. + + Args: + *children: The children of the component. + **props: The props to pass to the component. + + Returns: + The switch component. + """ + return Switch.create( + *children, + checked=color_mode != LIGHT_COLOR_MODE, + on_change=toggle_color_mode, + **props, + ) + + class ColorModeNamespace(BaseVar): """Namespace for color mode components.""" icon = staticmethod(ColorModeIcon.create) button = staticmethod(ColorModeIconButton.create) + switch = staticmethod(ColorModeSwitch.create) color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode)) diff --git a/reflex/components/radix/themes/color_mode.pyi b/reflex/components/radix/themes/color_mode.pyi index 1c61743666..e4a2cbcacd 100644 --- a/reflex/components/radix/themes/color_mode.pyi +++ b/reflex/components/radix/themes/color_mode.pyi @@ -12,7 +12,8 @@ from typing import Literal, get_args from reflex.components.component import BaseComponent from reflex.components.core.cond import Cond, color_mode_cond, cond from reflex.components.lucide.icon import Icon -from reflex.style import color_mode, toggle_color_mode +from reflex.components.radix.themes.components.switch import Switch +from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode from reflex.utils import console from reflex.vars import BaseVar, Var from .components.icon_button import IconButton @@ -362,8 +363,184 @@ class ColorModeIconButton(IconButton): """ ... +class ColorModeSwitch(Switch): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + default_checked: Optional[Union[Var[bool], bool]] = None, + checked: Optional[Union[Var[bool], bool]] = None, + disabled: Optional[Union[Var[bool], bool]] = None, + required: Optional[Union[Var[bool], bool]] = None, + name: Optional[Union[Var[str], str]] = None, + value: Optional[Union[Var[str], str]] = None, + size: Optional[ + Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]] + ] = None, + variant: Optional[ + Union[ + Var[Literal["classic", "surface", "soft"]], + Literal["classic", "surface", "soft"], + ] + ] = None, + color_scheme: Optional[ + Union[ + Var[ + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ] + ], + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ], + ] + ] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + radius: Optional[ + Union[ + Var[Literal["none", "small", "full"]], Literal["none", "small", "full"] + ] + ] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, Union[Var, str]]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_change: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + **props + ) -> "ColorModeSwitch": + """Create a switch component bound to color_mode. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + default_checked: Whether the switch is checked by default + checked: Whether the switch is checked + disabled: If true, prevent the user from interacting with the switch + required: If true, the user must interact with the switch to submit the form + name: The name of the switch (when submitting a form) + value: The value associated with the "on" position + size: Switch size "1" - "4" + variant: Variant of switch: "classic" | "surface" | "soft" + color_scheme: Override theme color for switch + high_contrast: Whether to render the switch with higher contrast color against background + radius: Override theme radius for switch: "none" | "small" | "full" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props to pass to the component. + + Returns: + The switch component. + """ + ... + class ColorModeNamespace(BaseVar): icon = staticmethod(ColorModeIcon.create) button = staticmethod(ColorModeIconButton.create) + switch = staticmethod(ColorModeSwitch.create) color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))