CSS color-scheme Property

❮ Previous Reference Next ❯


:root {
  color-scheme: dark;

textarea {
  color-scheme: light;


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
JavaScript syntax:

Standard Syntax

color-scheme: normal|light|dark|only|initial|inherit|revert|revert-layer|unset;

Browser Support


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;
❮ Previous Reference Next ❯