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.
Quick example
:root {
/* Enables systemic dark mode support */
color-scheme: light dark;
}Quick facts
Initial value
normalInherited
Yes
Applies to
all elements and text
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+