Dark Mode

Looking at a white background in an unlit room at night is uncomfortable. The complaint is old, but products had little to offer against it. The only control available was screen brightness, and turning that down dimmed the text along with the background.

The situation changed when operating systems started offering light and dark as a user-level setting. If the system was set to dark and one app still opened bright white, that app stood out, and users read the mismatch as a sign the product was unfinished.

Plenty of teams first responded by inverting the palette. Turning white backgrounds black and black text white was easy to build and hard to read.

Every color is held as a pair — one value for light backgrounds, one for dark — and the theme setting decides which set the screen uses. It is not an inversion; it is two definitions maintained side by side.

Two sets are necessary because the same color reads differently depending on what sits behind it. A blue on a dark background looks considerably more intense than the same blue on white, so it usually gets swapped for a value one or two steps lighter. If the color palette is already numbered by lightness, that swap is simply moving from the 600 step to the 400 step.

Depth has to be expressed differently too. On a light screen a card floats because of the shadow underneath it. On a dark background that shadow is invisible, so the raised element gets a background one step lighter than the surface below it instead.

Avoiding pure black is close to a rule. White text on true black appears to bleed at the edges, which makes long reading tiring. Nudging the background up to a very dark gray makes the identical text noticeably easier to read.

Contrast ratio, the single number describing the brightness gap between text and its background, has to be measured separately for both sets. A gray that passes at 4.7 to 1 on a light screen commonly falls to 2.9 to 1 on a dark one, which is why a theme built by inverting values fails accessibility checks it previously passed.

"Let's push dark mode to next quarter. Every color needs a second value and the palette isn't set up for that."

With only one set of colors defined, this is not a matter of flipping the screen.

"This gray is unreadable in dark. Measured, it doesn't even reach 3 to 1."

A value chosen against a light background failed against a dark one.

"All the shadows we used for layering disappear in dark, so let's raise the surface a step instead."

Rebuild the same hierarchy using a different device.

At Pagedeck, Noa named each color and registered it as a design token, recording the light value and the dark value together. Theo never has to transcribe a new number; the same token name simply resolves to a different value depending on the theme.