Theme Controller

Input(
    type='checkbox',
    value='synthwave',
    cls='toggle theme-controller'
)

Input(type='checkbox', value='synthwave', cls='checkbox theme-controller')

Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox', value='synthwave', cls='theme-controller'),
    # <!-- sun icon -->
    Icon.sun(cls="swap-on"),
    # <!-- moon icon -->
    Icon.moon(cls="swap-off"),
    cls='swap swap-rotate'
)

Label(
    "Default",
    Input(type="checkbox", cls="toggle mx-2 theme-controller", value="synthwave"),
    "Synthwave",
    cls="flex cursor-pointer gap-2 items-center"
)

Label(
    # <!-- sun icon -->
    Icon.smol_sun(),
    Input(type='checkbox', value='synthwave', cls='toggle theme-controller'),
    # <!-- moon icon -->
    Icon.smol_moon(),
    cls='flex cursor-pointer gap-2 items-center'
)

Label(
    Input(
        type="checkbox",
        cls="theme-controller",
        value="synthwave"
    ),
    Icon.smol_sun(cls="w-4 h-4 stroke-current"),
    Icon.smol_moon(cls="w-4 h-4 stroke-current"),
    cls="toggle text-base-content"
)

Input(type='checkbox', value='synthwave',
    cls="toggle theme-controller bg-blue-600 text-blue-200 border-blue-700 checked:bg-yellow-100 checked:text-yellow-600 checked:border-yellow-400")

THEMES = ["default", "retro", "cyberpunk", "valentine", "aqua"]
radio_attrs = {
        "type": "radio",
        "name": "theme-radios",
        "cls": "radio radio-smtheme-controller"
    }

return Fieldset(
    *(Label(
        Input(
            value=theme,
            checked=(theme == "default"),
            **radio_attrs
        ),
        theme.capitalize(),
        cls="flex gap-2 cursor-pointer items-center"
    ) for theme in THEMES),
    cls="fieldset"
)

Div(
    Input(type='radio', name='theme-buttons', aria_label='Default', value='default', checked=True, cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Retro', value='retro', cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Cyberpunk', value='cyberpunk', cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Valentine', value='valentine', cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Aqua', value='aqua', cls='btn theme-controller join-item'),
    cls='join join-vertical'
)

THEMES = ["default", "retro", "cyberpunk", "valentine", "aqua"]
    input_attrs = {
        "type": "radio",
        "name": "theme-dropdown",
        "cls": "theme-controller btn btn-sm btn-block btn-ghost justify-start"
    }

    return Div(
        Div(
            "Theme",
            Icon.down_caret(),
            tabindex="0",
            role="button",
            cls="btn m-1"
        ),
        Ul(
            *(Li(Input(
                value=theme,
                aria_label=theme.capitalize(),
                checked=(theme == "default"),
                **input_attrs
            )) for theme in THEMES),
            tabindex="0",
            cls="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl"
        ),
        cls="dropdown mb-72"
    )