v149 · CSS · PWA · AccentColor

Theme Color Picker

Pick a PWA theme_color and watch how form controls look when they use accent-color: AccentColor. In Chrome 149 installed apps, AccentColor derives from the manifest's theme_color — not the OS accent setting.

AccentColor
accent-color: auto
Hardcoded hex
accent-color: AccentColor — In standalone PWA (Chrome 149+), derives from manifest theme_color
Manifest theme_color
#1a73e8
In Web App Manifest:
"theme_color": "#1a73e8"
My Web App

Settings

✓
Brand
System

why scoping matters

/* Web App Manifest */
{
  "theme_color": "#1a73e8",
  ...
}

/* CSS in the web app */
:root {
  accent-color: AccentColor;
  /* Chrome 149 standalone: AccentColor = #1a73e8 (from manifest)
     Browser tab / non-installed: AccentColor = OS accent setting */
}

checkbox, radio, range { accent-color: AccentColor; }

/* Before Chrome 149: AccentColor was always the OS accent.
   A green OS accent would turn all your blue-branded checkboxes green.
   Chrome 149 fixes this for installed PWAs. */

see also