Dark mode is not an inversion

Most broken dark modes come from the same shortcut: swap the background and text tokens and call it done. Five values need deciding separately, and one of them causes the majority of the visible failures.

The one that breaks things is any colour used both as text and as a fill. A dark ink colour used for a section band works in light mode; in dark mode that token becomes near-white, the band turns pale, and the white text on it disappears entirely. A band needs its own pair of values that are not derived from the text colour.

Shadows are the second. A black shadow at 12 per cent opacity is invisible on a dark background, so cards that were separated by elevation become a flat sheet. Dark interfaces separate surfaces with lightness instead: a card slightly lighter than the page behind it, and a border.

The five values that need their own dark definitions, and the one that breaks everything.

Saturated accents need lowering. A colour that is comfortable on white vibrates against near-black, particularly in the blue and violet range. Most design systems keep the hue and drop the saturation ten to fifteen per cent for dark mode.

Images with white backgrounds are the fourth, and they cannot be fixed in CSS. A product photo cut out on white becomes a glowing rectangle. Either the assets get transparent backgrounds or the container gets a light card behind them on purpose.

The fifth is the one people forget entirely: the browser's own form controls, scrollbars and selection colour. A single `color-scheme: dark` declaration hands all of them over to the browser and fixes a class of problems nobody usually notices until a screenshot shows a white scrollbar down the side of a black page.