color-scheme
Tells the browser which color themes (light, dark) the element can be rendered in. This automatically adjusts UI elements like scrollbars and form controls to match the theme.
It is documented as part of the CSS Color specification.
Syntax
/* Usage Example */
:root {
/* Enables systemic dark mode support */
color-scheme: light dark;
}
/* Syntax */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;color-scheme Browser support
Widely available
Since
2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
81+
96+
13+
81+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more