v149 · CSS · PWA · demo

Accent Form Showcase

Compare three accent-color strategies side by side — AccentColor (system), auto, and a hardcoded colour. Switch strategies and change the custom colour to see how each behaves.

In Chrome 149+, when a PWA runs standalone (installed), AccentColor is derived from the app's manifest theme_color. In a regular browser tab, AccentColor still reflects the OS accent colour preference. The auto keyword picks the browser default, which also honours the theme in standalone mode.
Strategy Value in browser tab Value in standalone PWA (Chrome 149+) Best for
AccentColor OS accent colour App's theme_color Brand-aware forms in PWAs
auto Browser default (often OS accent) App's theme_color Zero-config; same result in Chrome 149+
#hex / rgb() Always fixed colour Always fixed colour Strict brand colour on all surfaces 
/* accent-color strategies */

/* 1. System color — uses OS accent, or theme_color in standalone PWA */
input[type="checkbox"] { accent-color: AccentColor; }

/* 2. auto — let the browser choose; same as AccentColor in Chrome 149+ standalone */
input[type="checkbox"] { accent-color: auto; }

/* 3. Hardcoded — always your brand colour, everywhere */
input[type="checkbox"] { accent-color: #0066cc; }

see also