Skip to content
@anomalia/ui v0.1.0

Foundations

Theme

Light / dark / system with no flash on first paint, driven by one `data-theme` attribute.

ThemeProvider ThemeToggle theme themeScript
import { ThemeProvider, ThemeToggle, theme, themeScript } from '@anomalia/ui';

Notes

  • Add themeScript to app.html — ThemeProvider runs after hydration, one frame too late to prevent the flash on its own.
  • theme.mode is what the user chose (including "system"); theme.resolved is what is painted.

Examples

Toggle

Three states, not two: a plain light/dark switch silently drops "follow my OS", which is what most people actually want.

Chosen mode: system · painted: light

API

theme

PropTypeDefaultDescription
mode'light' | 'dark' | 'system'—The stored preference.
resolved'light' | 'dark'—What is actually painted.
set(mode) / toggle()method—Change and persist the preference.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.