demo · v149
OS Accent Integration
Set an OS accent color and a PWA theme_color independently and watch how Chrome 149 resolves AccentColor in each context. In a browser tab the OS accent always wins; in PWA standalone mode the manifest theme_color takes precedence — keeping form controls on-brand regardless of the user's OS color preference.
This page reads the real
AccentColor system color using a hidden <div> with background: AccentColor. The simulated PWA window shows how Chrome 149 would override that value when the app is installed standalone.
Strategy:
OS Accent Color (simulated)
Choose accent:
Custom:
Detected OS accent:
PWA manifest.json
theme_color:
Custom:
theme_color:
Simulated PWA (standalone)
AccentColor resolution — all contexts
| Context | Chrome version | AccentColor resolves to | Effect on controls |
|---|
see also
- PWA Theme Match — brand-matched form controls via theme_color
- Fallback Chain — full AccentColor resolution across contexts
- Manifest Accent Simulator — live manifest JSON preview
- ChromeStatus: System Accent Color Scoped to Web Apps
- MDN — accent-color