demo · v150 · PWA

Titlebar Overlay & AccentColor

When a PWA enables Window Controls Overlay, the browser exposes env(titlebar-area-x/y/width/height) so the app can paint custom content into the system titlebar. Pairing this with AccentColor / AccentColorText lets the app's titlebar chrome automatically match the user's OS accent — with zero JS, zero hard-coded colours, and WCAG-safe foreground text guaranteed.

simulated PWA window Standard titlebar
Titlebar mode
Simulated OS accent
My PWA — Accent-Aware App
✦ My PWA env(titlebar-area-*)

This simulated app body is themed entirely from AccentColor and AccentColorText. Change the OS accent above — the titlebar, nav active state, buttons, and focus rings all update automatically.

Active CSS values

AccentColor #1a73e8
AccentColorText #fff

WCO manifest snippet

{ "display_override": ["window-controls-overlay"], "theme_color": "AccentColor" }

How it works

/* In the PWA's CSS — fully OS-adaptive, no JS, no hard-coded colours */

/* Titlebar area uses AccentColor as background */
.titlebar {
  app-region: drag;              /* makes the area draggable on desktop */
  background: AccentColor;       /* matches OS accent */
  color: AccentColorText;        /* always readable (WCAG-safe) */

  /* Size the area using WCO environment variables */
  height: env(titlebar-area-height, 40px);
  padding-left: env(titlebar-area-x, 12px);
  padding-right: env(titlebar-area-width, 0px);
}

/* Manifest enables WCO */
// manifest.json
{
  "display_override": ["window-controls-overlay"],
  "theme_color": "AccentColor"
}

/* CSS media query detects WCO active */
@media (display-mode: window-controls-overlay) {
  .titlebar { height: env(titlebar-area-height); }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗