CSS: color-scheme

Property color-scheme

now you can just add this to have automatic dark theme, for all of your web pages.

:root {
 color-scheme: light dark;
}

What is color-scheme property

The CSS color-scheme property tells the browser which UI color themes (light, dark, or custom) an element can be rendered in.

it affects browser‑provided UI such as scrollbars, buttons, menu, and default system colors.

but it also changes your text and background to dark theme (or light theme) automatically.

Values

.x {
 /* default */
 color-scheme: normal;

 color-scheme: light;
 color-scheme: dark;

 /* allow both */
 color-scheme: light dark;

 color-scheme: only light;
}

Browser support

Property color-scheme is supported by all major browsers since 2023.