Theme Controller

A checked theme-controller input switches the entire page theme via CSS — no JS required. Use JS + localStorage if you need the choice to persist on page refresh.

Toggle

A checkbox styled as a toggle. Unchecked = current/default theme. Checked = the named theme.

Bare toggle — switches to synthwave

Toggle with text labels Default Synthwave

Toggle with sun / moon icons (outside)

Toggle with icons inside (DaisyUI toggle icon variant)

Custom colors on the toggle

Checkbox

Same logic as toggle, just a regular checkbox appearance.

Checkbox — switches to synthwave Synthwave

Swap with theme-controller

Compose a swap label with a theme-controller checkbox inside. The hidden checkbox drives both the swap animation and the theme switch simultaneously.

Sun / moon rotate — switches to synthwave

Radio inputs

Radio inputs in a group — only one theme active at a time.

Radio group — 5 themes

Default Retro Cyberpunk Valentine Aqua

Radio buttons

Radio inputs styled as buttons, grouped in a join.

Vertical join

Horizontal join

Dropdown

Radio buttons inside a dropdown — pick a theme from a menu.

Theme picker dropdown

Theme