Theme Switcher

​

Basic Usage

import reflex_ui as ui

ui.theme_switcher()

​

Positioned

# Top right corner
ui.theme_switcher(class_name="absolute top-4 right-4")

# Bottom left corner
ui.theme_switcher(class_name="fixed bottom-4 left-4")

​

Demo Example

rx.el.div(
    # Your main content
    ui.theme_switcher(class_name="absolute top-4 right-4"),
    class_name="relative"
)

​

In Navigation Bar

rx.hstack(
    rx.text("My App", font_size="1.5rem", font_weight="700"),
    rx.spacer(),
    rx.hstack(
        ui.link("Home", to="/"),
        ui.link("About", to="/about"),
        ui.link("Contact", to="/contact"),
        spacing="1.5rem"
    ),
    ui.theme_switcher(),
    spacing="2rem",
    padding="1rem 2rem",
    border_bottom="1px solid var(--gray-4)",
    width="100%"
)

​

In Settings Page

rx.vstack(
    rx.text("Appearance", font_size="1.25rem", font_weight="600"),
    rx.text(
        "Select your preferred color mode",
        color="gray.600",
        font_size="0.875rem"
    ),
    ui.theme_switcher(),
    align_items="flex-start",
    spacing="1rem",
    padding="1.5rem",
    border="1px solid var(--gray-4)",
    border_radius="0.5rem"
)

​

Props Reference

​

Color Modes

• System: Matches the user’s operating system preference
• Light: Forces light color mode
• Dark: Forces dark color mode

​

Visual States

• Active: Shows with background highlight and shadow
• Inactive: Muted color that brightens on hover
• Hover: Secondary color on inactive buttons

​

Styling

• Container: Horizontal flex layout with secondary background
• Buttons: Small squares (1.5rem) with rounded corners
• Active button: White/secondary background with small shadow
• Inactive buttons: Muted color with hover effect
• Icons: Consistent 14px size
• Spacing: Small padding between buttons

​

Accessibility

• Each button has an aria-label describing its function
• Keyboard accessible with Tab and Enter/Space
• Visual focus indicators
• Clear active state indication

​

Icons

• System: Computer icon
• Light: Sun icon
• Dark: Moon icon

​

Implementation Details

• Uses Reflex’s built-in color_mode and set_color_mode utilities
• Conditionally renders active state based on current mode
• Memoized for optimal performance
• Each button triggers set_color_mode with the corresponding mode
• Smooth color transitions between states