Themes

Same components, different world. Pick one in the sidebar.

Available themes

Import a theme in your CSS. All design tokens and dark mode are included.

@import "@beaket/ui/themes/porcelain.css";

Dark mode

Every theme ships with a dark variant. Import one CSS file and dark mode works automatically — no flags, no extra imports, no toggle configuration required.

How it works

Each theme file contains both light and dark tokens. Dark mode activates via @media (prefers-color-scheme: dark), following the user's OS setting. Shadows auto-flip through token references — no overrides needed.

Manual control

To override OS detection, set beaket-color-scheme in localStorage:

// Force dark
localStorage.setItem("beaket-color-scheme", "dark");

// Force light
localStorage.setItem("beaket-color-scheme", "light");

// Follow OS (default)
localStorage.removeItem("beaket-color-scheme");