Dark mode

Every generated system ships a dark palette. Opt in per page or per subtree:

<html data-theme="dark">

How the dark palette is derived

Neutrals invert: white surfaces (cards, inputs, menus) go dark, black text goes light. Hue and saturation are kept - only the lightness channel flips.
Brand colours get a visibility floor: anything darker than 55% lightness is lifted so a deep navy button doesn't vanish on a dark page, while the relative order of your shades is preserved.
--colour-on-solid never flips: text on solid brand surfaces (buttons, badges) keeps its contrast in both themes.
Semantic status colours (success / warning / danger) lift the same way, so alerts and toasts stay readable.

Customising it

The generated overrides live in the [data-theme='dark'] block in abstracts/_colours.scss (text-colour flips in abstracts/_typography.scss). Override any -l value there, or add your own hand-tuned dark palette - it's plain SCSS and it's yours.

Wiring a toggle

<button onclick="document.documentElement.toggleAttribute('data-theme') ||
  document.documentElement.setAttribute('data-theme', 'dark')">
  Toggle theme
</button>

Or respect the OS setting with a few lines of JS: matchMedia('(prefers-color-scheme: dark)') and set the attribute accordingly.