v150 · CSS · PWA

PWA Settings Panel

A simulated installed web app settings panel where every interactive element — header, active tab indicator, toggle track, focus ring, primary button — pulls its color from AccentColor / AccentColorText. Pick a simulated OS accent and the entire UI updates. The contrast checker confirms AccentColorText always meets WCAG AA.

Keyword support checking...
matchMedia('(display-mode: standalone)') checking...
Panel color source simulated CSS variable
Checking installed-PWA context...
Simulated OS accent:
App Preferences
Notifications
Show push notifications from this app
Auto-save
Save changes without confirmation
Sync across devices
Requires sign-in
AccentColorText on AccentColor
Aa
ratio: —
AccentColor on white
Aa
ratio: —
AccentColor on bg-ivory
Aa
ratio: —

code

/* In a PWA: these resolve to OS accent color */
.app-header {
  background: AccentColor;
  color: AccentColorText;       /* auto-readable: black or white */
}
.tab.active {
  color: AccentColor;
  border-bottom: 3px solid AccentColor;
}
input[type=checkbox]:checked + .toggle-track {
  background: AccentColor;
}
.primary-btn {
  background: AccentColor;
  color: AccentColorText;
}
/* On the open web (non-installed): AccentColor resolves to a
   neutral system color — no fingerprinting exposure */

see also

implementation reference

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