# CSS `color-scheme`

The `color-scheme` CSS property allows an element to indicate which color schemes it can comfortably be rendered in. These values are negotiated with the user's preferences (e.g., system Dark Mode).

## 1. Syntax

```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;
```

## 2. Values

*   **`normal`**: Indicates that the element is not aware of any color schemes, and so should be rendered using the browser's default color scheme (usually light).
*   **`light`**: Indicates that the element can be rendered using the operating system's light color scheme.
*   **`dark`**: Indicates that the element can be rendered using the operating system's dark color scheme.
*   **`only`**: Forbidden from being overridden by the user agent (e.g., Chrome's "Auto Dark Mode").

## 3. Effects

When you specify `color-scheme: dark` (or `light dark` when the user prefers dark):

1.  **System Colors:** System colors like `Canvas` (background) and `CanvasText` (text) update to dark values.
2.  **Form Controls:** Default form controls (scrollbars, inputs, buttons) render in dark mode.
3.  **Spellcheck:** Spellcheck underlines change color.

## 4. Usage

It is best practice to set this on the `:root` element to enable dark mode for standard UI elements immediately.

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

This single line can make a plain HTML page look correct in dark mode without any other CSS, as the browser will use a dark background and light text for the default styles.

## 5. Interaction with `prefers-color-scheme`

`color-scheme` declares *support*. `@media (prefers-color-scheme: dark)` allows you to apply *custom styles*.

However, with the new `light-dark()` function, `color-scheme` becomes the switch that toggles the value.

[[programming/css/css]]
[[programming/css/light-dark-function]]
[[programming/css/colors-and-backgrounds]]