CSS color-scheme

The color-scheme property tells the browser which color schemes an element supports. Browsers can use that information for built-in controls, form fields, scrollbars and default canvas colors.

Syntax

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

Example

:root {
  color-scheme: light dark;
}

This tells the browser that the page can work in both light and dark modes. Your own CSS still needs to define readable colors for each mode.

Result:

Common mistake

color-scheme is not a palette generator. It lets browser UI match the declared scheme; it does not replace your theme styles.