CSS `color-scheme`: Opting Into Browser UI Themes
The color-scheme property tells the browser your site supports light/dark modes, automatically styling UI like scrollbars and form controls to match the user's OS preference.
Why it exists
Operating systems offer system-wide color schemes like "light" and "dark" mode. Without a way to signal support, web pages can look out of place, with bright content clashing with a dark OS theme. The color-scheme property was created to bridge this gap, allowing a site to declare its compatibility with these user preferences.
The mental model
Think of color-scheme as an agreement with the browser. You're telling it, "My site is designed to work in light and dark modes." In return, the browser takes care of restyling its own UI elements—the scrollbar, form controls, and default background—to match the user's chosen OS theme. It handles the "native" parts so you can focus on your own component styles.
How it works
You declare color-scheme on an element, typically :root for the entire page. By setting it to light dark, you indicate the page can be comfortably rendered in either scheme. The browser then reads the user's OS setting and applies the appropriate theme to its own UI chrome. This includes changing default text and background colors, form input appearance, and scrollbar colors. The only keyword can be used (e.g., only light) to prevent browsers from automatically applying a theme, like Chrome's Auto Dark Theme.
When to use it
Use color-scheme as the first step when implementing a dark mode or theme-switching feature. Applying color-scheme: light dark; to the :root element is the standard way to opt your entire page into user-preferred themes. This gives you a baseline of theme-aware browser controls before you write any custom styles.
When not to use it
Do not rely on color-scheme alone to style your entire application. It only affects browser-provided UI and CSS system colors. For styling your own custom components, like navigation bars, buttons, and content areas, you must use the prefers-color-scheme media feature to define your own light and dark theme styles. Using one without the other results in an inconsistent user experience.
One canonical example
To make an entire website support both light and dark modes based on the user's system preference, you add a single rule to your CSS: :root { color-scheme: light dark; } This tells the browser to use its dark theme for UI elements like scrollbars and textareas when the OS is in dark mode, and its light theme otherwise.
Interview question
What is the primary effect of applying `color-scheme: light dark;` to the `:root` element of a webpage?
- a.It signals to the browser to adjust its native UI elements, such as scrollbars and form controls, according to the user's OS theme.Correct
- b.It automatically styles all custom components on the page to match the user's system theme.
- c.It forces the user's operating system to switch its theme between light and dark based on the webpage's content.
- d.It defines the default light and dark mode styles for all CSS system colors used throughout the document.
Why? this is the answer
The card states that `color-scheme` tells the browser to "take care of restyling its own UI elements—the scrollbar, form controls, and default background—to match the user's chosen OS theme." Option B describes the function of `prefers-color-scheme` for custom components, not `color-scheme`.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #design systems
- #dark mode
- #accessibility
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles