TaskAdd color-scheme: light dark to :root. Body has background #fff, color #111 in light; dark overrides via prefers-color-scheme. Form has an input and a select β they pick up native dark/light styling automatically.
color-scheme + scrollbar colors
60 XP5 min
Theory
What color-scheme actually does
:root { color-scheme: light dark; }Tells the browser "this page supports both modes." Browser then themes:
- Scrollbars β light or dark variant matching the page.
- Form controls β
<input>,<select>,<button>get dark or light native styling. - `<dialog>` backdrop β different default backdrop color.
- Spell-check underlines β different colors for visibility.
Without color-scheme: light dark, you'd ship a dark page with bright white scrollbars and bright form controls β looks broken.
Per-element
.modal { color-scheme: dark; }Force a region into one scheme regardless of the page setting. Useful for a modal that ignores OS preference.
Browser limitations
- Custom-styled scrollbars override color-scheme.
- Some Linux distros (older Firefox) don't honor it for native widgets.
In 2026: treat color-scheme: light dark on :root as a free win. Add it to every project.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 15 lessons in each track are free. No card needed for those.