Tweaking One Set of Colors for Light/Dark Modes 관련

CSS > Article(s)

---

Article(s)

---

Tweaking One Set of Colors for Light/Dark Modes

A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.

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);
}

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;
  }
}

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

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

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

See the Pen Colors for Light and Dark Mode Automatically by chriscoyier on CodePen.

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.

Tweaking One Set of Colors for Light/Dark Modes

---

A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.