Dark mode defaults without extra CSS
You used to restyle every form control, scrollbar, and background for dark mode. color-scheme tells the browser to use its built-in light or dark styling for those parts.
2 color-scheme: light dark;
3}
4/* Browser handles form controls, scrollbars, canvas */
2 input, select, textarea, button {
3 background: #333;
4 color: #eee;
5 }
6 ::-webkit-scrollbar { ... }
7}
8/* Manual restyling of every system UI part */
Browser Support for color-scheme
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
One declaration
The browser applies its native light or dark styling to form controls, scrollbars, and default backgrounds.
No form control hacks
No need to override every input and select for dark. They follow the scheme automatically.
Pairs with light-dark()
Use color-scheme with light-dark() or variables so your colors and system UI match.
How it works
The old approach was to add a @media (prefers-color-scheme: dark) block and manually set background and color on every input, select, textarea, and button, plus scrollbar styling. Lots of code and easy to miss a control.
color-scheme: light dark tells the browser that the page supports both schemes. The browser then uses its built-in light or dark styling for form controls, scrollbars, and the default canvas background, based on the user's preference. You still set your own colors for text and backgrounds; color-scheme handles the system-level parts so you do not have to.