light-dark() & Relative Colors

light-dark() & Relative Colors

Two modern helpers for effortless theming.

light-dark()

Pick a value for light mode and dark mode in ONE declaration:

:root {
  color-scheme: light dark;        /* enable both */
}
body {
  color: light-dark(#111, #f5f5f5);
  background: light-dark(#fff, #121212);
}

The browser reads the current scheme and picks the right one, no media query needed!

Relative colors (from ...)

Modify a color relative to another:

.badge {
  color: rgb(from #04aa6d r g b / 0.5);     /* half alpha green */
  color: oklch(from var(--brand) l c h / 0.7);
  color: hsl(from #ff6347 h s 80%);          /* lighter tomato */
}

Use from <color> to base one color on another channel-by-channel.

The four magic keywords

r, g, b (or l, c, h) refer to the SOURCE channels. Alpha with alpha or a.

TL;DR

• light-dark(a, b) returns one of two values by scheme.
• Enable with color-scheme: light dark.
• rgb(from #04aa6d r g b / 0.5) derives a tint.
• Perfect for theme systems and consistent components.