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.

Drag-a-theme Chippractice Team Grid with Roles Filterpractice App Screenshot Tourpractice

Keep learning

All guides Try the interactive Lab