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

color-scheme =   
  normal                                       |  
  [ light | dark | <custom-ident> ]+ && only?    
  
```

Examples
--------

### Declaring color scheme preferences

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;
}
```


To opt in specific elements to the user's color scheme preferences, declare `color-scheme` on those elements.


```css
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}
```

### Styling based on color schemes

To style elements based on color scheme preferences, use the `prefers-color-scheme` media query. The example below opts in the entire page to using both light and dark operating system color schemes via the `color-scheme` property, and then uses `prefers-color-scheme` to specify the desired foreground and background colors for individual elements in those color schemes.


```css
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}
```


Alternatively, use the experimental `light-dark()` `<color>` function to set the foreground and background colors for the different color schemes using a more compact code structure:


```css
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `prefers-color-scheme` media query to detect user preferences for color schemes.
* `light-dark()` color function to set colors for both light and dark color schemes.
* Applying color to HTML elements using CSS
* Other color-related properties: `color`, `accent-color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* `background-image`
* `print-color-adjust`