v158 · css · system colors

One-accent theming

The reason this shipped: a product can now theme everything from one declaration. The card below gets exactly one dynamic style write — accent-color on the card element. Native controls pick it up directly; the custom primary button and badge use AccentColor/AccentColorText; and because AccentColor is a real <color>, color-mix() derives a whole tint/shade palette from it. No custom properties, no JavaScript colour math.

Probing this browser…

Brand controls (writes one property)

Notification settings 3 active

Move the hue slider, change the lightness, or press Save to read the resolved theme back.

the whole theme, in CSS

/* the ONLY dynamic write this page makes: */
card.style.accentColor = "oklch(55% 0.2 330)";

/* everything else is static CSS: */
@supports (background: AccentColor) and (color: AccentColorText) {
  .primary     { background: AccentColor; color: AccentColorText; }
  .card-head   { background: color-mix(in srgb, AccentColor 14%, white); }
  .count-badge { background: color-mix(in srgb, AccentColor 18%, white);
                 border-color: color-mix(in srgb, AccentColor 55%, black); }
}

AccentColorText is the UA’s contrast guarantee: flip lightness to dark and the button text goes white; back to light and it goes black — the same pairing the native controls use internally. The WPT suite even requires AccentColor to resolve inside color-mix() and registered custom properties, which is what makes the derived palette legitimate CSS rather than a trick.

see also