Same color, different neighbor

On my previous theme, the same cobalt glow was pigment on paper in light mode and a navy stain in dark mode. I never changed the color. I changed what sat around it.

Josef Albers built a whole course on that idea. Interaction of Color (opens in a new tab) teaches that a color has no fixed appearance. It depends on its neighbors.

One scene, two meanings, marked up
Top: a light slab in a dark page. Bottom: the same scene as a dark stage.

Most dark themes flip the light theme’s lightness and ship. The relationships break quietly.

First, find them. This counts every radial glow mixed from your accent color:

Code

grep -rnoE 'radial-gradient\([^;]*var\(--color-accent\) [0-9]+%' src | wc -l

Mine found 29 lines. Then route them all through one token with two values:

Code

:root { --glow-tint: var(--color-accent); }          /* cobalt on paper */
.dark { --glow-tint: rgba(243, 236, 222, 0.42); }    /* faint ivory on black */

Every glow points at the token. One decision, written once, holding in both themes.

A dark theme is not an inverted light theme. It is a second set of relationships.

Want it as slides? Download the carousel.