Theme
stable 1.2 kB<HkThemeService>Reads, writes and persists the token layer at runtime. One class on the root element retunes every component, with no rebuild and no per-component theme prop.
#theming#service
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| theme | Signal<'light' | 'dark'> | 'dark' | Current theme, readable as a signal. |
| storageKey | string | 'hk-theme' | Where the choice is remembered. |
| accents | HkAccent[] | 16 named presets | The built-in palette, from Crimson through Slate. A shortcut, not the API — any CSS colour works. |
Methods
toggle()() => voidFlips between light and dark.
set(theme)(theme: 'light' | 'dark') => voidApplies a theme and persists the choice.
setToken(name, value)(name: string, value: string) => voidOverrides one token at runtime.
setAccent(colour)(colour: string) => voidWrites --hk-accent. Every shade is derived from it with color-mix, so an accent is one value rather than a five-step ramp.
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-accent | #dc2626 | Primary accent every component derives from. |
| --hk-radius | 12px | Corner radius scale. |
| --hk-density | 1 | Padding multiplier. |
Accessibility
- Sets color-scheme alongside the class, so browser-drawn controls — dropdown popups, scrollbars, date pickers — are painted the right way round.
- The stored choice wins over the OS preference; the OS only decides for a first-time visitor.
- The class is applied before first paint by an inline script, so a dark-mode visitor never sees a white flash.