ENG-6168: Add theme switcher (#3)

* ENG-6168: Add theme switcher

* pre-commit

Author: carlosabadia

demo/demo/demo.py

@@ -16,6 +16,7 @@ def index() -> rx.Component:
                 position="top-center",
             ),
         ),
+        ui.theme_switcher(class_name="absolute top-4 right-4"),
         class_name=ui.cn(
             "flex flex-col items-center justify-center h-screen", "bg-secondary-1"
         ),

reflex_ui/__init__.py

@@ -5,6 +5,7 @@
 _REFLEX_UI_MAPPING = {
     "components.base.button": ["button"],
     "components.base.avatar": ["avatar"],
+    "components.base.theme_switcher": ["theme_switcher"],
 }
 
 _SUBMODULES = {"components", "utils"}

reflex_ui/components/base/theme_switcher.py

@@ -0,0 +1,38 @@
+"""Theme switcher component."""
+
+from reflex.components.component import Component, memo
+from reflex.components.core.cond import cond
+from reflex.components.el import Button, Div
+from reflex.style import LiteralColorMode, color_mode, set_color_mode
+
+from reflex_ui.components.icons.hugeicon import hi
+from reflex_ui.utils.twmerge import cn
+
+
+def theme_switcher_item(mode: LiteralColorMode, icon: str) -> Component:
+    """Create a theme switcher item button for a specific mode."""
+    active_cn = "text-secondary-12 shadow-small bg-secondary-1"
+    unactive_cn = "hover:text-secondary-12 text-secondary-9"
+    return Button.create(
+        hi(icon, class_name="shrink-0", size=14),
+        on_click=set_color_mode(mode),
+        class_name=(
+            "flex items-center cursor-pointer justify-center rounded-sm transition-color size-6",
+            cond(mode == color_mode, active_cn, unactive_cn),
+        ),
+        aria_label=f"Switch to {mode} mode",
+    )
+
+
+@memo
+def theme_switcher(class_name: str = "") -> Component:
+    """Theme switcher component."""
+    return Div.create(
+        theme_switcher_item("system", "ComputerIcon"),
+        theme_switcher_item("light", "Sun01Icon"),
+        theme_switcher_item("dark", "Moon02Icon"),
+        class_name=cn(
+            "flex flex-row items-center bg-secondary-3 p-1 rounded-md w-fit",
+            class_name,
+        ),
+    )