Theme Toggle

from starhtml import *

Div(
    Span("acme", cls="font-semibold tracking-tight"),
    Div(
        A("Docs", href="#", cls="text-sm text-muted-foreground transition-colors hover:text-foreground"),
        A("Blog", href="#", cls="text-sm text-muted-foreground transition-colors hover:text-foreground"),
        ThemeToggle(),
        cls="flex items-center gap-4",
    ),
    cls="flex w-full items-center justify-between border-b px-4 py-3",
)

from starhtml 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"""
        let newTheme = '{theme_value}';
        if (newTheme === 'system') {{
            newTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }}
        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;
        }}
    """),
    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 items-center justify-center py-6",
)