Theme Toggle

from starhtml import *
from starui import *

theme_options = [
    {"value": "light", "label": "Light", "icon": "lucide:sun"},
    {"value": "dark", "label": "Dark", "icon": "lucide:moon"},
    {"value": "system", "label": "System", "icon": "lucide:laptop"},
]

def set_theme_js(theme_value):
    return js(f"""
        const newTheme = '{theme_value}';
        document.documentElement.setAttribute('data-theme', newTheme);
        const iframeKey = 'iframe-theme-' + window.location.pathname.split('/').pop();
        localStorage.setItem(iframeKey, newTheme);
    """)

Div(
    Style(f"""
        [data-theme="{DEFAULT_THEME}"] .dropdown-icon-alt,
        [data-theme="{ALT_THEME}"] .dropdown-icon-default {{
            display: none;
        }}
    """),
    P("Dropdown Theme Selector", cls="font-medium mb-4 text-center"),
    P("Common pattern with Light, Dark, and System options",
      cls="text-sm text-muted-foreground mb-6 text-center"),
    Div(
        DropdownMenu(
            DropdownMenuTrigger(
                Icon("lucide:sun", cls="h-[1.2rem] w-[1.2rem] dropdown-icon-default"),
                Icon("lucide:moon", cls="h-[1.2rem] w-[1.2rem] dropdown-icon-alt"),
                Span("Theme", cls="sr-only"),
                variant="outline",
                size="icon"
            ),
            DropdownMenuContent(
                *[
                    DropdownMenuItem(
                        Icon(opt["icon"], cls="mr-2 h-4 w-4"),
                        Span(opt["label"]),
                        data_on_click=set_theme_js(opt["value"])
                    )
                    for opt in theme_options
                ],
                align="end"
            )
        ),
        cls="flex justify-center"
    ),
    cls="space-y-4 py-8"
)