Dark mode is the cheapest audit a design system will ever get.
Nobody plans it that way. It arrives as a roadmap item, usually with a sentence like "should be quick, we already have tokens". Then someone flips the theme and half the product turns into a grey soup with white boxes floating in it.
What dark mode exposes is not missing colours. It exposes which colours were never decisions. A token called blue-500 tells you what it looks like, not what it is for. Is it a link, a selected tab, a focus ring, the brand? In light mode it does not matter, because all of those happen to be the same blue. In dark mode they suddenly need to be four different things, and the system has no way to say so.
Then there are the hardcoded values. The hex code someone pasted into a card shadow. The "temporary" white background on a table header. The border that was set to a specific grey because the token felt slightly too light. Every one of them shows up the moment the background changes, like footprints in fresh snow.
My advice, if dark mode is on your list: do it, but treat the first pass as research, not delivery. Count what breaks. Each broken screen is a place where a component was making its own choices instead of asking the system.
Semantic tokens are boring to name and boring to migrate to. They are also the only reason a theme switch can ever be one line of code.
Get an email when Aino publishes
More from
Aino Korhonen →