This page lists the CSS "System Colors", that change depending on your system's color scheme. They can be used to make any page dark mode aware with a minimal amount of effort. For more info, see the MDN pages on <system-color> and color-scheme.
Name | Color | Purpose |
---|---|---|
AccentColor | Background of accented user interface controls. | |
AccentColorText | Text of accented user interface controls. | |
ActiveText | Text of active links. | |
ButtonBorder | Base border color of controls. | |
ButtonFace | Background color of controls. | |
ButtonText | Text color of controls. | |
Canvas | Background of application content or documents. | |
CanvasText | Text color in application content or documents. | |
Field | Background of input fields. | |
FieldText | Text in input fields. | |
GrayText | Text color for disabled items (for example, a disabled control). | |
Highlight | Background of selected items. | |
HighlightText | Text color of selected items. | |
LinkText | Text of non-active, non-visited links. | |
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 of visited links. |