Restore the rx.color_mode.switch (#3294)

This was tentatively removed for 0.5.0 without a deprecation period, so adding
it back to avoid immediate breakage in existing apps.

reflex/components/radix/themes/color_mode.py

@@ -23,7 +23,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
 
@@ -143,11 +144,34 @@ class ColorModeIconButton(IconButton):
         )
 
 
+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))

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))