Components Dark mode toggle

Dark mode toggle

Self-contained theme switcher. Reads the current mode from localStorage, cookie, or prefers-color-scheme, animates the swap with the View Transitions API circle reveal, and persists the choice to both localStorage and a cookie.

<koala-dark-mode-toggle>

Canonical

The icon-only form — one tap flips the whole app between light and dark. Mounted in the navbar.

Variants

2 variants

Icon only

variant="IconOnly"

Labelled

variant="Labelled"

States

2 states

Current

Reflects the live theme — click to flip the app.

Hover

Hover the button to see the surface-dim background.

Props

2 attributes

Attribute	Values	Notes
variant	IconOnly, Labelled	Defaults to `IconOnly`. Use `Labelled` inside dropdown menus.
size	ExtraSmall, Small, Default, Large, ExtraLarge	Icon size. Defaults to `Small` for the navbar; use `Default` inside dropdown menus.
extra-class	string	Optional Tailwind utilities appended to the button class list.

Do & don't

Do Mount one toggle per shell — the navbar. Every instance reads and writes the same state.

Don't Don't sprinkle multiple toggles across a page. Each has its own Alpine state — they desync visually until next page load.