v149 · CSS · PWA · demo

PWA Theme Match

Pick a theme_color for a simulated PWA and watch the title bar and form controls (using accent-color: AccentColor) update in real time. This is the experience Chrome 149 delivers in standalone mode — no CSS required beyond accent-color: auto.

theme_color: #1a73e8

Presets:

My App — standalone

Settings

Enable notifications

Dark mode

Daily sync

Manual sync

Before Chrome 149 (browser tab)

AccentColor = OS system accent (e.g. Windows blue, macOS graphite). Form controls match the user's desktop — not the app's brand.

Chrome 149+ (standalone PWA)

AccentColor = app's theme_color. Form controls automatically match the title bar and brand palette — zero extra CSS.

"theme_color": "#1a73e8",
"display": "standalone",

/* Just use accent-color: auto or AccentColor.
   Chrome 149 does the rest when running standalone. */
:root {
  accent-color: auto;          /* auto = AccentColor in Chrome 149+ standalone */
  /* OR explicitly: */
  accent-color: AccentColor;   /* resolved to theme_color in standalone PWA */
}

/* No need to hardcode: */
/* accent-color: #1a73e8; */

see also