CSS System colors
Written on 10 Mar, 2025.
System colors are a way for the OS, the browser, or the users to provide some colors to your CSS.
This is a great opportunity for accessibility, as the colors will also reflect users preferences on high contrast colors.
With the exception of AccentColor and AccentColorText, there is wide
browser support. [caniuse]
I didn't see this feature in the wild, but I've seen using browser specific
vars such as --webkit-link, which is a pity.
The <system-color> keywords are defined as follows, conveniently extracted by
the CSS Spec and
rendered by your current browser:
AccentColor
Background of accented user interface controls. (unsupported)
AccentColorText
Text of accented user interface controls. (unsupported)
ActiveText
Text in active links. For light backgrounds, traditionally red.
ButtonBorder
The base border color for push buttons.
ButtonFace
The face background color for push buttons.
ButtonText
Text on push buttons.
Canvas
Background of application content or documents.
CanvasText
Text in application content or documents.
Field
Background of input fields.
FieldText
Text in input fields.
GrayText
Disabled text. (Often, but not necessarily, gray.)
Highlight
Background of selected text, for example from ::selection.
HighlightText
Text of selected text.
LinkText
Text in non-active, non-visited links. For light backgrounds, traditionally blue.
Mark
Background of text that has been specially marked (such as by the HTML mark element).
MarkText
Text that has been specially marked (such as by the HTML mark element).
SelectedItem
Background of selected items, for example a selected checkbox.
SelectedItemText
Text of selected items.
VisitedText
Text in visited links. For light backgrounds, traditionally purple.
