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.
Usage example
:root {
/* Enables systemic dark mode support */
color-scheme: light dark;
}Initial value
normal
Inherited
Yes
Applies to
allElementsAndText
Animation type
discrete
Values
normallightdark 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.
Safe to use without fallbacks.
81+
96+
13+
81+