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. |