Try the switcher at the top of this page. Ten palettes, light and dark, and every mark, chip and article header on the site repaints, the same slots the pixel system is drawn in. There is no JavaScript involved in the repaint at all, the work is in never letting a component name a colour.
Everything is a slot#
One rule, enforced by review: a component may reference var(--accent) or var(--c1)…var(--c6), and it may derive from them with color-mix(). It may not contain a hex code. A palette is then just eight declarations.
:root{
--accent-raw:#1F35E6;
--accent:var(--accent-raw);
--accent-deep:color-mix(in srgb,var(--accent) 74%,#000);
--accent-soft:color-mix(in srgb,var(--accent) 46%,var(--bg));
}
[data-palette="ember"]{
--accent-raw:#D8502E;
--c1:#D8502E; --c2:#E8912A; --c3:#B5372E;
--c4:#EFB13C; --c5:#8C4A3E; --c6:#3E2A28;
}color-mix() is what removes the ninety-line palette file. Every tint, shade and hairline is derived from the one hue the palette declares, which also means a new palette cannot forget to define one of them.
The flash, and how it is actually fixed#
The preference lives in localStorage. React reads it after hydration, which is roughly 150ms too late: long enough for a light page to paint and then snap to dark. Every trick that tries to hide this with a transition is treating the symptom.
The fix is a small blocking script in <head> that reads the preference and stamps the attributes on <html> before the first paint.
<script>
try {
const s = localStorage;
const t = s.getItem("theme");
const p = s.getItem("palette");
if (t) document.documentElement.dataset.theme = t;
if (p) document.documentElement.dataset.palette = p;
} catch {}
</script>Dark is not the same palette, dimmed#
Each multi-colour palette gets a second definition for dark, with the mid-tones lifted. A hue that reads confidently on #EFEDE4 disappears into #0B0C0F; automatic dimming produces mud in one direction and neon in the other.
The test that keeps it honest#
Any new component gets looked at in three combinations before it ships: the default palette in light, a monochrome palette, and a multi-colour palette in dark. Monochrome is the sharpest of the three: if a component stops being readable when every slot is a tone of one hue, it was using colour to carry meaning that value should have carried.