What CSS color-scheme Actually Does

color-scheme does not create a dark theme for you. It tells the browser which schemes your design supports, so browser-controlled parts of the page can match.

That includes form controls, scrollbars, spelling highlights, and the default canvas colors. Without the hint, a dark page can still get a very bright input field. Small detail, large flashlight.

Declare the schemes you support

For a page with both light and dark styles:

:root {
  color-scheme: light dark;
}

The order expresses a preference, while the user’s settings and browser decide which supported scheme is used. You still need to provide the actual colors for your content, usually with a media query or light-dark().

If a page only supports one scheme, say so:

:root {
  color-scheme: only light;
}

The only keyword prevents a browser or extension from automatically adjusting the page into another scheme.

I would add color-scheme near the root of any real light-and-dark theme. It is one line that makes the parts owned by the browser feel like they belong with the rest of the design.

← Back to all articles