color · theming
System color keyword
also called system colors (css), CanvasText (css), AccentColor (css), ButtonFace (css)
A CSS keyword such as Canvas, CanvasText or LinkText that resolves to a colour chosen by the operating system rather than by the page.
A system colour keyword is a <color> value the page does not get to decide. Write
background: Canvas; color: CanvasText and the browser fills in whatever the operating
system, the browser theme, or the user’s accessibility settings currently say those are. CSS
Color 4 defines about twenty of them and they come in pairs, a surface and the text meant to
sit on it: Canvas and CanvasText, Field and FieldText, ButtonFace and ButtonText
with ButtonBorder for the edge, Highlight and HighlightText for selection, plus
LinkText, VisitedText, ActiveText, GrayText, Mark and MarkText, and the newer
AccentColor and AccentColorText for the accent the user picked in their OS settings.
Their most important job is not voluntary. In
forced colors mode the browser substitutes these keywords for the
page’s own palette wholesale, so this small set is the entire palette an interface has, and
authoring against it is how a page stays coherent when it is repainted by a contrast theme.
That is why a border declared as 1px solid ButtonBorder survives and a border declared as
1px solid #D8DEE9 does not: one is a keyword the OS is already filling in, the other is a
value it has taken away.
Used deliberately, outside that mode, they buy something else: an element that matches the
platform instead of the product. A selection band drawn in Highlight, a focus treatment in
AccentColor, a native-feeling control in ButtonFace will all track the user’s own theme
and shift when they change it, which no colour token of yours can do. The
catch is that you cannot predict any of these values, so they have to be used in their
pairs, never mixed with an author colour on the other side of the same contrast. AccentColor
on your own grey is a contrast ratio nobody has measured.
Two footnotes. The keywords answer prefers-color-scheme through the element’s
color-scheme, so Canvas is not permanently white; it is whichever surface the current
scheme calls for. And there is an older, deprecated set with names like ActiveBorder,
ButtonHighlight, InactiveCaptionText and ThreeDFace, inherited from the Windows 95
control panel. Browsers still parse them, but they resolve to fixed compatibility values
rather than to anything the user chose, so they answer nothing and are not worth writing.
Which word?
| If you want | say |
|---|---|
| styling with the colours the OS itself picked | system color keyword |
| the OS is imposing its own palette on your interface | forced colors mode |
| the keyword colours built into CSS | named color |