demo · v137

Themed UI

v137 ships AccentColor as a usable CSS keyword. Pair it with AccentColorText (the legible foreground) and you can derive a whole site theme from the user's OS. Below: an unthemed card next to one whose primary surface tokens come from the system — same markup, automatic personalisation.

probing…
AccentColor — — AccentColorText — —
NEW UPDATED BETA

Inline links like read the spec pick up the same hue. Form controls ( opted in) also adopt the accent.

focused card
—

the code

:root {
  --theme-bg: AccentColor;
  --theme-fg: AccentColorText;
}
.btn-primary { background: var(--theme-bg); color: var(--theme-fg); border-color: var(--theme-bg); }
.pill        { background: var(--theme-bg); color: var(--theme-fg); }
input[type=checkbox], input[type=range], progress { accent-color: AccentColor; }

see also