Fundamentals

Theming

Dark is the default; light overrides colours and shadows only. The theme is a data-theme attribute on <html>.

Switching

The toggle remembers the choice in localStorage['kern-theme'].

import { setTheme, getTheme, initTheme } from '@yfridelance/kern'; initTheme({ default: 'system' }); // 'dark' | 'light' | 'system' setTheme('light'); document.addEventListener('kernThemeChange', (e) => console.log(e.detail.theme));

Before the first paint

Set the attribute in an inline script in <head>, before the stylesheet, so the page never flashes in the wrong theme:

Rules

Use tokens (var(--surface), var(--text-muted)) instead of hex values. They switch with the theme.
Status colours (--ok, --warn, --danger) carry meaning: use them only for that meaning, and always together with text or a shape.
Parts of a page can use another theme: data-theme="light" on any element applies to its subtree.