v150 · CSS · PWA · Components
UI Components
A gallery of real UI components — buttons, badges, tabs, toggles, focus rings, header bars — all themed with AccentColor and AccentColorText. Change the simulated OS accent and every component updates instantly.
Runtime context
Checking support for
AccentColor, installed-PWA display mode, and forced-colors mode.
Buttons
background: AccentColor; color: AccentColorText;
Badges
background: AccentColor
New
Beta
Pro
Pending
Tab Strip
border-color: AccentColor; color: AccentColor
Toggle Switches
background: AccentColor when checked
Progress Bar & Loading
accent-color: AccentColor via CSS var
Native Form Controls
accent-color: AccentColor
Focus Ring
outline: 3px solid AccentColor
App Header Bar
background: AccentColor; color: AccentColorText
Links
color: AccentColor
/* In your CSS (inside installed PWA, Chrome 150+):
:root {
--accent: AccentColor;
--accent-text: AccentColorText;
}
.btn-primary {
background: AccentColor;
color: AccentColorText;
}
.focus-ring:focus {
outline: 3px solid AccentColor;
}
.header {
background: AccentColor;
color: AccentColorText;
} */
references
- ChromeStatus entry
- CSS Color 4 - System Colors
- System Palette Explorer — live OS color probing
- Contrast Explorer — WCAG AA verification
- PWA Settings Panel — complete settings UI demo
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗