Theme

Manages light, dark, and system-preference modes. Persists the chosen mode to localStorage, applies a data-theme attribute to <html>, and supports a keyboard shortcut (Ctrl/Cmd+J).

How it works

The Theme class reads and writes to localStorage('theme') using three values: 'light', 'dark', and 'system'. Clicking the toggle cycles through them. The icon element automatically updates to reflect the active mode.

All Basix colour tokens are CSS custom properties defined on :root and overridden in [data-theme="dark"]. You can customise any token without touching JavaScript.

Usage

Customising tokens