v158 · css · system colors

Accent mirror

Everything in the left pane ships today: accent-color tints the native checkbox, radio, range and progress in every current engine. The right pane is the Chrome 158 half — a custom chip declared with background: AccentColor; color: AccentColorText that is supposed to mirror whatever the controls wear. Pick an accent and compare what getComputedStyle reads back.

Probing this browser…

Pick an accent

Native controls — accent-color (ships today)

Custom chip — AccentColor / AccentColorText (Chrome 158)

matching chip

Pick a swatch to read the resolution back.

what the readout proves

/* one declaration on the shared ancestor … */
#mirror-root { accent-color: hotpink; }

/* … native controls use it (since Chrome 93) … */
input[type="checkbox"], input[type="radio"],
input[type="range"], progress { /* tinted automatically */ }

/* … and from Chrome 158 custom UI can reference the SAME colour: */
@supports (background: AccentColor) and (color: AccentColorText) {
  .chip { background: AccentColor; color: AccentColorText; }
}

/* the probe this page runs — it CAN return false:
   two elements with different accent-color values must
   resolve `color: AccentColor` to two different colours */
getComputedStyle(elWithAccentA).color !== getComputedStyle(elWithAccentB).color

Three honest outcomes: the keywords do not parse at all (CSS.supports("color","AccentColor") is false — stock Chromium before 158); they parse but both elements resolve to the one static OS accent (the pre-158 flagged behaviour, and engines that have the keywords but not the CSSWG #5900 resolution); or they follow the value — the Chrome 158 contract.

see also