Reading progress of “Dark mode is a theme, not an inversion”: 0%
Systems
Dark mode is a theme, not an inversion
filter: invert(1) dark mode is a screenshot with the lights off. Real dark themes remap roles — and the shadows go first.
Intermediate1 min read (computed · recorded 7)updated 2026-09-12themingtokensdark-mode
by Motif Editors
revised 2026-09-12 — First publication in bank-3 batch 4.
Key takeaways
— Remap roles, not channels; keep the accent's job stable.
— Elevation becomes lightness steps because shadows die on black.
— Ship when the dark pairs pass contrast, not when the toggle exists.
Remap roles, not channels
surface, ink, accent — the roles stay, the values change. Inverting channels turns a warm paper into a cold slate and a red error into a cyan error. The site's theme-drop scene swaps the token values, and the light theme is a different theme, not a negative.
Shadows die in the dark; elevation needs a new language
On near-black, box-shadows are invisible — elevation comes from surface lightness: one step up per layer. Borders get lighter, not darker. And the accent usually needs to lose saturation: a brand violet at full strength on black vibrates.
Test images and charts first — they were designed for light.
Elevation = lightness steps, documented as tokens, not one-off greys.
The dark theme ships when its contrast pairs pass, not when the toggle exists.
Practise the lesson
Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.
The component this essay works with — mounted, not picturedDrag-a-theme Chip →
Drop a theme on a card
no theme applied
Component preview
Pricing, but it breathes
Three tiers, one accent, no gradient soup. Drop a different chip on this card and every value remaps at once.
Choose a plan
14-day refund · no card
Four theme presets from the admin control room. Drag one onto the card, or press it.
The chips are the presets the admin theme control room stores, and the contrast figures are the same WCAG arithmetic that room runs — so a preset that fails is named here, not quietly dropped from the menu. Pressing a chip does exactly what dropping it does; the drag is a shortcut, never the only way in.