concept · CSS · PWA

Web App Theme Preview

A simulated installed PWA whose chrome — titlebar, nav, buttons, focus rings — is all driven by AccentColor and AccentColorText. Pick a simulated OS accent colour and watch every surface update. In a real installed web app, no picker or JavaScript is needed: the browser supplies the colour automatically.

Simulated AccentColor: #1a6cf5 AccentColorText → white contrast pending fixed foreground pending simulate forced-colors

CSS keyword parse checking…

Current display context checking…

Forced colors checking…

Window controls overlay checking…

Installed PWA OS accent exposed

My Tasks — Installed PWA

Today 3

Upcoming

Projects

Archived

Today

✓
Ship new release
✓
Update changelog
Write blog post
Review pull requests
Send weekly update

Open web fallback neutral, no OS signal

My Tasks — Browser Tab

Today 3

Upcoming

Projects

Archived

Today

✓
Ship new release
✓
Update changelog
Write blog post

The same CSS still parses in a normal tab, but Chrome does not expose the user’s OS accent outside the installed-web-app context. The preview stays neutral instead of carrying a fingerprintable system colour.

AccentColor surface

AccentColorText surface

Neutral surface

In a real installed PWA running in Chrome 150, every coloured surface in the left frame reads AccentColor directly from CSS — no JavaScript, no theme-token plumbing, no OS-specific stylesheet. The right frame shows why the installed context matters: open-web pages get a neutral fallback so arbitrary sites cannot read a stable OS-accent fingerprint. AccentColorText picks whichever foreground gives the higher contrast ratio; the chip above shows the live black-vs-white decision and flags low-contrast fixed foregrounds.

Window Controls Overlay: when a PWA opts into overlay chrome, the titlebar area sized by env(titlebar-area-*) can use the same AccentColor / AccentColorText pair.

checking overlay API…

the CSS (what a real PWA uses)

/* titlebar gets the OS accent automatically */
.app-titlebar {
  background: AccentColor;
  color: AccentColorText;
}

/* active nav item — accent left border + accent text */
.nav-item.active {
  color: AccentColor;
  border-left: 3px solid AccentColor;
}

/* primary button */
.btn-primary {
  background: AccentColor;
  color: AccentColorText;
}

/* focus ring on inputs */
input:focus {
  outline: 3px solid AccentColor;
}

/* checked state on custom checkboxes */
.task-check.done {
  background: AccentColor;
  color: AccentColorText;
  border-color: AccentColor;
}

/* ordinary browser tabs parse the keywords but keep a neutral fallback */
.open-web-preview {
  background: Canvas;
  color: CanvasText;
}

/* forced-colors maps the system pair to the user palette */
@media (forced-colors: active) {
  .btn-primary {
    background: AccentColor;
    color: AccentColorText;
  }
}

/* Window Controls Overlay can share the same accent pair */
.titlebar-overlay {
  padding-top: env(titlebar-area-height, 0px);
  background: AccentColor;
  color: AccentColorText;
}

implementation reference

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

the CSS (what a real PWA uses)

see also

implementation reference