Interactive — click to toggle
Changes the page theme — sm and md sizes
md (default)
sm
How it works
Boot sequence — 3 steps
1
Read localStorage
Checks "slab-theme" key. If set, uses it immediately.
2
Fall back to system preference
If no saved preference, checks prefers-color-scheme: dark.
3
Set data-theme on <html>
All theme-dark.css overrides activate via the [data-theme="dark"] selector.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | sm = 58×28px, md = 72×34px. Knob and label scale proportionally. |
| style | CSSProperties | {} | Merged onto the root button element. |
Usage
import { ThemeToggle } from "components/ui/ThemeToggle";
// Place anywhere — typically in a nav bar or settings panel
<ThemeToggle />
// Small size for dense toolbars
<ThemeToggle size="sm" />
// The component handles everything else:
// — reading localStorage on mount
// — writing data-theme to <html>
// — persisting preference across reloads