v149 · CSS · PWA · Color

Fallback Chain

The AccentColor CSS system color resolves differently depending on context. This page traces the full chain — PWA standalone → browser tab → OS-level — and shows which step activates for each scenario.

Simulate context: Theme color: OS accent: Hardcoded hex:

understanding the resolution order

Chrome 149 + PWA standalone: AccentColor resolves to the app's theme_color from its web app manifest. Form controls with accent-color: AccentColor or accent-color: auto automatically adopt the brand color without any explicit CSS.

Browser tab (any Chrome): AccentColor reflects the user's OS/system accent. On Windows, that's the Personalization accent; on macOS, the Highlight Color. The PWA scoping is inactive.

Chrome < 149: AccentColor always resolved to the OS accent, even in installed PWAs. Brand colors required hardcoded accent-color: #hex declarations.

Hardcoded hex: Always resolves to the specified color, in any context. Use this when you need guaranteed brand color independent of OS or installation state.

see also