color-scheme
Tells the browser which color schemes the page supports, so built-in controls and scrollbars match.
Syntax
color-scheme: light dark;Values
| Parameter | Type | Description |
|---|---|---|
| light | keyword | Light scheme only. |
| dark | keyword | Dark scheme only. |
| light dark | keyword | Both; the user's system setting decides. |
Examples
Form controls in the dark scheme:
<div style="color-scheme: dark; background: Canvas; color: CanvasText; padding: 12px;">
<p>Built-in controls follow the dark scheme:</p>
<input placeholder="Dark field"> <button>Button</button>
<input type="checkbox" checked>
</div>Notes
Put color-scheme: light dark on :root when the site has a dark theme: fields, scrollbars and the default background will adapt. It also enables the light-dark() function.
See also
- light-dark() — Picks one of two colors depending on the current color scheme.
- @media — Applies rules only under given conditions — the window width, the system theme and others.
- accent-color — The accent color of built-in form controls: checkboxes, radio buttons, sliders and progress bars.
Related recipes
In the tutorial
- Dark mode — How to make a dark theme for a site — the color-scheme property, the prefers-color-scheme media query, colors in variables, the light-dark() function and a theme switch.