A dark theme is not an inverted stylesheet

Filed under colour

Inverting a light design is the cheapest way to ship a dark one and it reliably produces something worse than either. The reason is that light type on a dark ground does not behave like dark type on a light ground, and the values that were correct in one direction are wrong in the other.

Light type spreads

A bright glyph on a dark field appears to bleed slightly past its own edges. The effect is small and it is enough that text set at a weight which looked right in the light theme reads as too heavy in the dark one — letters fill in, counters close up, and a page that was crisp becomes slightly smeared.

The usual correction is to step the weight down: what was 400 in the light theme wants something nearer 350 in the dark one, if the family has it. Where it does not, dropping the text one notch off pure white achieves much of the same thing, because the effect scales with brightness.

Maximum contrast is not maximum legibility

Pure white on pure black is the highest contrast ratio available and one of the least comfortable pairings to read at length. In a dim room the page becomes a light source, the pupil opens for the surroundings and then meets a glare, and long paragraphs get tiring quickly. Some readers get visible after-images when they look away.

Contrast requirements are a floor, not a target. Passing at 21:1 is not twice as good as passing at 12:1.

Pulling the ground up off black and the text down off white — a very dark grey against a soft off-white — costs a little measured contrast and buys back a lot of comfort. The floor set by accessibility guidance still has to be cleared; there is simply no prize for clearing it by the largest possible margin.

Saturated colour behaves badly

An accent that looked deliberate on white often turns muddy or, worse, starts to vibrate against a dark ground. Strongly saturated blues are the usual casualty: on white they read as a considered choice, on near-black they read as a link that has not finished loading. Dark themes generally want their accents lighter and less saturated than the light theme's — which means a second set of values, chosen by eye, not a filter applied to the first.

Shadows stop working

Elevation in a light interface is communicated by shadow, which is a darkening. On a dark ground there is nothing left to darken, so the shadow disappears and every surface flattens into every other. The substitute is to raise the surface instead: lighter panels sit closer to the reader, darker ones recede. It is the opposite instinct and it takes a while to stop fighting it.

Do not force the choice

Respect the system preference by default, and if you offer a toggle, make it override rather than replace that preference. A site that ignores the setting and opens bright at night is worse than one with no dark theme at all — at least the second is predictable.