color-scheme
The color-scheme
CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
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.
Try it
Syntax
css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;
/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
The color-scheme
property's value must be one of the following keywords.
Values
normal
-
Indicates that the element isn't aware of any color schemes, and so should be rendered using the browser's default color scheme.
light
-
Indicates that the element can be rendered using the operating system light color scheme.
dark
-
Indicates that the element can be rendered using the operating system dark color scheme.
only
-
Forbids the user agent from overriding the color scheme for the element.
Can be used to turn off color overrides caused by Chrome's Auto Dark Theme, by applying
color-scheme: only light;
on a specific element or:root
.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements and text |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Adapting to color schemes
To opt the entire page into the user's color scheme preferences declare color-scheme
on the :root
element.
css
:root {
color-scheme: light dark;
}
Specifications
Specification |
---|
CSS Color Adjustment Module Level 1 # color-scheme-prop |
Browser compatibility
BCD tables only load in the browser
See also
prefers-color-scheme
media query to detect user preferences for color schemes.- Applying color to HTML elements using CSS
- Other color-related properties:
color
,background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, andcolumn-rule-color
background-image
print-color-adjust