Getting Started

Dark Mode

zits/ui ships dark by default and is fully themeable in both modes: components read OKLCH tokens that swap on a single .dark class.

How it works

The theme is a set of CSS variables. A .dark class on <html> swaps the palette; every component references the tokens, so nothing else changes. See Theming for the token list.

zits-ui.css css

:root  { --background: oklch(1 0 0);     --foreground: oklch(0.145 0 0); /* … */ }
.dark  { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); /* … */ }

A toggle

Toggling is just adding or removing the class. This site uses a tiny vanilla-JS helper so it works even on statically-rendered pages, persisting the choice to localStorage.

theme.js javascript

function toggleTheme() {
    const dark = document.documentElement.classList.toggle('dark');
    localStorage.setItem('zits-theme', dark ? 'dark' : 'light');
}

No flash

Apply the saved preference in <head>, before the first paint, so there is no flash of the wrong theme.

index.html / App.razor html

<script>
    const t = localStorage.getItem('zits-theme');
    if (t === 'light') document.documentElement.classList.remove('dark');
    else document.documentElement.classList.add('dark');
</script>