color-scheme
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. User agents change the following aspects of the UI chrome to match the used color scheme:
The color of the canvas surface.
The default colors of scrollbars and other interaction UI.
The default colors of form controls.
The default colors of other browser-provided UI, such as "spellcheck" underlines.
Component authors must use the prefers-color-scheme media feature to support the color schemes on the rest of the elements.
Common choices for operating system color schemes are "light" and "dark", or "day mode" and "night mode". When a user selects one of these color schemes, the operating system makes adjustments to the user interface. This includes form controls, scrollbars, and the used values of CSS system colors.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 81 | 81 | 96 | 13 | 81 | 13 | |
dark | 81 | 81 | 96 | 13 | 81 | 13 |
light | 81 | 81 | 96 | 13 | 81 | 13 |
normal | 81 | 81 | 96 | 13 | 81 | 13 |
only `only` keyword | 98 | 98 | 96 | 13 | 98 | 13 |
| Other | ||||||
| The color-scheme value for the name attribute of the meta element indicates a suggested color scheme that user agents should use for a page. If specified, you define the color scheme using a content attribute in the element with a valid CSS color-scheme value. | 81 | 81 | 96 | 12.1 | 81 | 12.2 |
- This feature was removed in a later browser version (85)
- This feature was removed in a later browser version (85)
- This feature was removed in a later browser version (85)
Syntax
/* Declare support for both light and dark modes */
:root {
color-scheme: light dark;
}
/* Set specific elements to light mode only */
.always-light {
color-scheme: light;
}
/* Use in conjunction with meta tags */
/* <meta name="color-scheme" content="light dark"> */Live demo
Use cases
-
Theme-aware pages
Declare light and dark support so built-in controls render in a way that matches the surrounding interface.
-
Embedded components
Scoped color-scheme can help widgets inside a larger page inherit the right native control styling.
Cautions
- Declaring dark support without testing contrast and component styling can create mismatched or unreadable UI.
- color-scheme does not replace explicit design tokens or full theme logic for custom components.
Accessibility
- Theme support should maintain readable contrast and predictable focus states in every declared scheme.