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 input, select, textarea, button {
3 background: #333;
4 color: #eee;
5 }
6 ::-webkit-scrollbar { ... }
7}
8/* Manual restyling of every system UI part */
2 color-scheme: light dark;
3}
4/* Browser handles form controls, scrollbars, canvas */
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.