System Accent Color Scoped to Web Apps

concepts

1. Accent Form Showcase

   Live controls — checkboxes, radio buttons, range sliders, progress bars — displayed with accent-color: AccentColor, accent-color: auto, and a hardcoded colour. Toggle between modes to see how each strategy responds to theme changes.

2. PWA Theme Match

   Adjust a simulated PWA theme_color with a colour picker and watch how form controls inside the app would look if they used AccentColor. Illustrates why scoping matters for brand consistency.

3. Theme Color Picker

   Choose from colour swatches or a custom picker; see how form controls (checkbox, radio, range, progress) look with accent-color: AccentColor, auto, or a hardcoded hex. Toggle strategies to understand when each is appropriate.

4. Manifest Accent Simulator

   Pick a theme_color from swatches or a custom colour picker and watch a simulated PWA window update — titlebar, checkboxes, radios, sliders, and progress bars all respond instantly. Switch between AccentColor, auto, and hardcoded strategies to compare them side by side. The live manifest JSON updates with each selection.

5. Fallback Chain

   Traces the full AccentColor resolution chain across three contexts — PWA standalone (Chrome 149+), browser tab, and Chrome < 149. Simulate each context, set the OS accent and theme_color independently, and see exactly which color each accent-color strategy resolves to in every scenario.

6. OS Accent Integration

   Set an OS accent color and a PWA theme_color independently and watch how Chrome 149 resolves AccentColor in each context. The page reads the real AccentColor system color from the browser and places it alongside the simulated PWA standalone context. Switch between AccentColor, auto, and hardcoded strategies to see the three-row resolution table update live.

   Live API PWA CSS system colors

why it shipped

CSS system colors like AccentColor are defined by the browser to reflect user preferences — on macOS, it is the Highlight Color; on Windows, it is the accent from Personalisation settings. Before Chrome 149, installed PWAs shared the same AccentColor as the rest of the browser, so a check box in a banking app might turn the user's bright-green OS accent colour. Chrome 149 narrows the scope: when a web app is installed and running standalone, AccentColor derives from the app's declared theme_color in its manifest. Developers can now use accent-color: AccentColor or just rely on accent-color: auto to get consistent, brand-matched form controls without hard-coding any hex values.

references

• ChromeStatus entry
• Chrome 149 release notes
• MDN — accent-color
• CSS Color 4 — System Colors
• Chrome Developers — Web App Manifest