Tweaking One Set of Colors for Light/Dark Modes

Often when dealing light/dark modes, you’re thinking about entirely changing colors. A light color becomes a dark color and vice versa. That’s the nature of the situation!

But think about the oranges. The pinks. The greens and blues. Those are colors that have a decent chance of working OK in both a dark and light theme.

Here’s the thing:

• If you’ve got a pink that looks great on light, it probably should be brightened a bit on dark.
• Or, if you’ve got a pink that looks great on dark, it probably should be darkened a bit on light.

An example of something like this is syntax highlighting colors so that’s what we’ll do here. But it could be anything: illustration parts, your <hr /> elment, buttons, whatever.

Here’s a pink:

.some-tag {
  /* pink! */
  color: oklch(0.75 0.2 328);
}Code language: CSS (css)

Which looks fine on white (and has accessible contrast):

Set it on black, and it still has accessible contrast, and looks… also fine.

But I think we could do better. We certainly could have picked a color that didn’t meet accessible contrast requirements. But also, I think it would look a bit nicer if that pink was darkened up a smidge on light and lightened up a bit dark.

Fortunately we’ve set the color in OKLCH which has perceptually uniform brightness. Meaning if we have a bunch of colors, and we notch them all up in brightness by the same number, they will all appear about the same amount brighter to our human eyes.

A way to approach this is to pick a number of how much we want to bright, darken (or both). Like:

html {
  color-scheme: light dark;

  --colorAdjuster: -0.1;
  @media (prefers-color-scheme: light) {
    --colorAdjuster: 0.133;
  }
}Code language: CSS (css)

Then use this number to adjust our color(s):

.some-tag {
  color: oklch(calc(0.75 - var(--colorAdjuster)) 0.2 328);
}Code language: CSS (css)

Here’s an example doing that with syntax highlighting. You’ll need to adjust your color mode preference to see the colors change.

Here’s both modes as images:

In my opinion, these colors have a very similar feel, but each color, from a base, was darkened a bit in light mode and lightened a bit in dark mode.