Dark mode

Light is home; dark is re-tuned for app screens, not inverted. Grounds go deep blue-slate, raised surfaces get lighter, text roles swap to their dark steps, and every logo swaps to its dark treatment. The kit wires all of it, your job is to use role tokens and ship the toggle.

Dual trigger, both, always

Explicit choice: <html data-theme="dark"> (or "light").
OS preference: with no attribute set, @media (prefers-color-scheme: dark) re-tunes everything, including with JavaScript disabled.
Any dark rule you add must be mirrored under both triggers. Toggle-only or OS-only dark is a defect.

The persisted toggle

Load the kit's helper in <head> so a saved choice applies before first paint, then wire any button to it:

Toggle pattern

<button class="btn btn--secondary" onclick="novusTheme.toggle()">Toggle theme</button>

<script src="node_modules/novus-design-kit/js/novus-theme.js"></script>
<button onclick="novusTheme.toggle()">…</button>

What changes automatically

Master lockup: colour → white (the .brandlogo--light/--dark pair).
Product lockups: identity colours → the two light blues.
Status tints, accent text, shadows, and surfaces re-tune to their dark steps.

What to avoid

Never hardcode a dark text colour on a token surface, it disappears in dark mode. Use --text, --accent-text, --success-text…
Never keep a product's identity colour in dark-mode lockups.
Never rely on the toggle alone, a device merely set to dark must look identical.