System colors
The system color CSS keywords, such as ButtonBorder or LinkText, allow you to match default colors from the user agent.
Overview
The system color CSS keywords, such as ButtonBorder or LinkText, allow you to match default colors from the user agent.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS type | ||||||
system-color.accentcolor accentcolortext `AccentColor` and `AccentColorText` | 115 | 115 | 103 | 16.5 | 115 | 16.5 |
system-color.buttonborder `ButtonBorder` | 101 | 101 | 109 | | 101 | |
system-color.mark `Mark` | 102 | 102 | 109 | | 102 | |
system-color.marktext `MarkText` | 102 | 102 | 109 | | 102 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Implementation note
- Only supports a fallback: The native color when accent colour (in macOS' appearance panel) is set to 'multicolour'. On iOS falls back to the blue accent colour
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Implementation note
- Only supports a fallback: The native color when accent colour (in macOS' appearance panel) is set to 'multicolour'. On iOS falls back to the blue accent colour
Syntax
CSS
.button {
background-color: ButtonFace;
color: ButtonText;
border-color: ButtonBorder;
}Live demo
Use cases
Using System colors
The system color CSS keywords, such as ButtonBorder or LinkText, allow you to match default colors from the user agent.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features