Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesAct & navigateDark mode toggle

Dark mode toggle

The one theme switch every Koala site uses, from Portal to the brochures.

<koala-dark-mode-toggle>

Icon only

The default is an icon button for a navbar slot: a moon in light mode, a sun in dark. It reads the theme from the visitor's saved choice, then the cookie, then the system setting, and saves a change to both so the next page paints in the right theme first time. Where the browser supports it, the new theme reveals as a circle from the button. Try it; it switches this whole page.

size="Small"
size="Default"

Labelled

Labelled is a full-width menu row with the icon and "Dark mode" or "Light mode", for the Portal user menu.

Switch

Switch reads "Switch to dark mode" or "Switch to light mode" with the icon trailing, and takes all its styling from extra-class, so it can sit among a site menu's links.

API

variant IconOnlyLabelledSwitch
size ExtraSmallSmallDefaultLargeExtraLarge
extra-class classes appended to the button
data-analytics event name
Open