Light and dark are two designs, not one inverted

Dark mode usually arrives the same way. Someone adds a class to the root element, flips the greys, ships it that afternoon. It looks right in the screenshot and stops looking right the moment anyone measures it.

What can be flipped, and what cannot

The neutral scale can be flipped. Our eleven greys are the same eleven values in both themes, read in the opposite order: the lightest in one theme is the darkest in the other. That works, because a neutral's only job is relative lightness, and lightness reverses cleanly.

The brand colour cannot. Our purple is #7C3AED. On our light ground it measures 5.51 to 1, past the 4.5 that AA asks for. On the dark ground the same purple falls to 3.28 and fails.

So on dark we use #976CFF, which reaches 5.25 there. Put that one back on light and it drops to 3.44, and now it fails.

Flipping it would not have helped either. The inverse of that purple is a green. There is no arithmetic that turns a light theme colour into its dark theme counterpart. Somebody has to choose the second value and then measure it.

So the colour stopped being a colour

Components do not choose a purple. One writes text-primary and never learns which value it was handed. The token holds two definitions, one per theme, and the component is identical in both.

That is the part worth copying. A hex written into a component is a decision that has to be remembered twice, forever, and nobody remembers anything forever. The exceptions we allow are surfaces that stay the same in both themes, where there is nothing to remember.

What else an inversion ruins

A shadow is a darker version of the surface beneath it, and on a near black ground there is nothing darker to reach for. Depth there comes from a lighter surface, which is a different drawing, not a different value.

A photograph shot on white becomes a lit rectangle in a dark room. A hairline that whispers on white disappears on black, and the fix is a lighter border, not the inverse one.

The check costs nothing

Screenshot both themes at the same scroll position. Anything present in one and missing in the other is a bug, and the eye finds it in seconds. Then measure every pair of text and surface against 4.5 to 1. Not the ones you remember choosing. All of them.

Why it sits inside the price

Two palettes, two rounds of measurement, two sets of screenshots at every review. It is inside every figure on the pricing page. There is no dark mode line to add at the end, and no version of a site we would ship that works in only one of the two.