prefers-color-scheme: Respect User Theme Preferences
The prefers-color-scheme media query lets your CSS automatically adapt to a user's system-wide light or dark mode. It's used to create themes that respect user preferences.
Why it exists
Users increasingly expect applications to respect their OS-level appearance settings. Manually toggling a dark mode on every single website is tedious. This CSS feature provides a standardized way for websites to query and adapt to that system-wide preference automatically.
The mental model
Think of prefers-color-scheme as a listener for your user's environment. Instead of forcing a design, your site asks the operating system, "Does this person prefer light or dark?" and adjusts its own color palette accordingly, creating a more seamless and comfortable user experience.
How it works
You use a CSS @media rule with one of two values: light or dark. The browser checks the user's OS or browser settings for their theme preference. If the setting matches your query, the CSS styles inside that media block are applied. For example, @media (prefers-color-scheme: dark) will apply styles only when the user has dark mode enabled. If no preference is set, the system defaults to light.
When to use it
Use this as the primary mechanism for implementing a light/dark theme. It's ideal for changing background colors, text colors, border colors, and even swapping out images or SVGs to better fit a light or dark context. It's the modern, user-friendly approach to theming that works out of the box.
When not to use it
Don't rely on it exclusively if you also want to offer an in-app theme switcher. A user might have their OS set to dark mode but prefer your specific site in light mode. In that case, you'd use JavaScript to let the user override the CSS styles, but prefers-color-scheme still provides the correct and expected initial state.
One canonical example
A common pattern is to define a light theme by default and then override it for dark mode. First, set the base styles: body { background-color: #FFFFFF; color: #111111; }. Then, add the media query to handle dark mode: @media (prefers-color-scheme: dark) { body { background-color: #121212; color: #EEEEEE; } }. This simple snippet ensures the page respects the user's system setting.
Interview question
What is the primary function of the prefers-color-scheme media query?
- a.To automatically adapt a website's color palette to the user's system-wide theme preference.Correct
- b.To offer different color options for users with various forms of color blindness.
- c.To enable a user to manually select between light and dark themes on a website.
- d.To optimize website loading by serving lighter stylesheets for dark mode users.
Why? this is the answer
The prefers-color-scheme media query's main purpose is to automatically adjust a website's appearance based on the user's operating system theme setting. While users might want a manual toggle (Option C), that functionality typically requires JavaScript, not just this CSS media query.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #dark mode
- #accessibility
- #media query
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