CSS color-scheme Property
Example
:root {
color-scheme: dark;
}
textarea {
color-scheme: light;
}Meaning:
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.
You can also use meta tag:
<meta name="color-scheme" content="only dark">| Default value: | normal |
| Inherited: | Yes |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
color-scheme: normal|light|dark|only|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| normal | Defines that the element isn't aware of any color schemes, and so should be rendered using the browser's default color scheme. |
| light | Defines that the element can be rendered using the operating system light color scheme. |
| dark | Defines 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. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
color-scheme: normal;
}