v149 · CSS · Accent Color Demo

Accent Color Demo

Shows the current resolved value of AccentColor and AccentColorText CSS system color keywords on this page. In Chrome 149+, regular web pages receive a fixed fallback color; only installed PWAs receive the real OS accent color.

Detecting context…
Checking display mode and context…

AccentColor keyword

background: AccentColor · color: AccentColorText

AccentColor swatch
AccentColor: reading…
AccentColorText: reading…

accent-color: auto on form controls

checkbox (accent-color: auto)
radio (accent-color: auto)
range slider
60% progress bar

CSS custom property workaround

/* AccentColor restricted to PWA context in Chrome 149+.
   For web pages that need a branded accent, use an explicit color instead: */

:root {
  --brand-accent: #1a73e8;  /* your brand color */
}

button {
  /* Use AccentColor inside PWA, explicit color on web */
  background: var(--brand-accent);
}

/* Or use @media (display-mode: standalone) to target PWA context: */
@media (display-mode: standalone) {
  button {
    background: AccentColor;
    color: AccentColorText;
  }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗