Interaction
color-scheme
color-scheme tells the browser whether an element can be drawn in a light or a dark color scheme. Form controls such as checkboxes and text fields, scrollbars, and system colors like Canvas then follow that scheme.
Syntax
normal | [ light | dark | <custom-ident> ]+ && only?Preview
Code
.box {
background-color: Canvas;
color: CanvasText;
color-scheme: dark;
}Controls
About
Only the browser’s own colors change
In the dark scheme, form controls and scrollbars get a dark look, and system colors such as Canvas (the background) and CanvasText (the text) switch to their dark versions. Colors you write yourself (such as background: #fff) stay as they are. The preview here uses system colors for the box’s background and text, so they switch along with the controls.
Values
normal: the initial value. Follows the page’s color scheme, which comes from<meta name="color-scheme">and is light without it.light/dark: draws in the light or the dark scheme.light dark: says both are supported and draws in the one chosen in the OS or browser (prefers-color-scheme).only: written with another value, it forbids the browser from changing the scheme on its own. Writeonly lightto opt out of features like Chrome’s Auto Dark Mode, which redraws light pages in dark colors.
Making a whole page dark-ready
:root { color-scheme: light dark; } makes the page’s background and text colors follow the OS setting too. To keep the page from flashing white before the CSS loads, also add <meta name="color-scheme" content="light dark"> to the HTML.
Watch out
- It is inherited, so it reaches every control inside the element.
light-dark(#ffffff, #111827)picks one of two colors depending on whether the element’s scheme is light or dark. Use it wherecolor-schemeislight darkto make your own colors follow the scheme too.- The syntax also allows a
<custom-ident>, but it only reserves room for future schemes and means nothing today. The controls here leave it out.