The site is blinding at night
“The site is blinding at night — support dark mode.”
19 files · +751 / −258 · shipped 31 July 2026
- 01
Add the dark half of the palette
Every colour on this site already lived in one tokens file, so the theme is a single :root[data-theme='dark'] block there — no second copy of the palette behind a media query to drift out of sync. A new --on-accent token was added for text sitting on an accent fill, which flips separately from --ink.
- 02
Resolve the theme before first paint
The layout's <head> got an inline script: read localStorage's stored side, else follow the OS's prefers-color-scheme, write data-theme on <html> before the body paints, and keep following the OS live until a visitor picks a side.
- 03
Add the DAY/NIGHT toggle
The header grew a labelled rocker, not a moon icon — on brand for a utility that already talks about shifts. It renders hidden until that same inline script un-hides it, so a JS-off visitor never sees a dead control.
- 04
Keep the always-dark bars dark
The contact and footer "switch room" bookends, plus a few permanently dark bars elsewhere, were repointed at theme-invariant tokens instead of the ones that flip — so they read as a darker, separate room in both themes rather than inverting.
- 05
Teach the accessibility crawler to see both themes
The automated a11y check had only ever scanned the one palette that existed. It now opens every route in a light-preference browser context and a dark-preference one and scans both.
What review changed
Review sent this branch back twice before it merged: two tokens behind the homepage's technical figure had no dark value at all, so its dashed construction lines, dimension rails, and vent strokes all composited to near-invisible on the new background — the figure lost its draughtsmanship and left two captions floating with no rail attached. And the DAY/NIGHT rocker itself picked up a display style that silently defeated its own [hidden] guard, so a JS-off visitor would have seen a control that looked live and did nothing. Both were fixed on the same branch.
A full day/night theme, auto by default and sticky once a visitor picks a side, everywhere on the site.
See it flip on the homepage →