How does color-scheme interact with user-agent stylesheets and prefers-color-scheme?

WHAT THIS TESTS: This question probes whether you understand the division of labor between the browser's user-agent stylesheet and your own author CSS when implementing dark and light modes. Specifically, it checks if you know that color-scheme is a hint to the browser about which system color schemes an element can be rendered in, not a mechanism for styling arbitrary DOM elements. It also checks whether you can articulate how this property composes with prefers-color-scheme to build a complete theme system.

A GOOD ANSWER COVERS: A strong response hits four things in order. First, define color-scheme as a property that tells the user agent which color schemes the element supports, such as light, dark, or both. Second, explain the concrete effects on browser chrome: the UA recolors the canvas surface, scrollbars, form controls like checkboxes and textareas, and other built-in UI such as spellcheck underlines to match the used scheme. Third, contrast this with prefers-color-scheme, which is a media feature that lets authors write conditional rules for their own custom components and layouts. Fourth, describe the combined workflow where you set color-scheme on the root element to opt the whole page into system themes, then use prefers-color-scheme to toggle your own design tokens, ensuring native UI and author UI stay synchronized.

COMMON WRONG ANSWERS: The biggest red flag is conflating the two mechanisms by saying color-scheme alone implements dark mode for your entire interface. Another mistake is claiming that color-scheme changes the computed values of your custom CSS variables or text colors; it does not. Some candidates also miss the only keyword, which forbids the UA from overriding the color scheme and is useful for disabling forced dark modes like Chrome Auto Dark Theme on specific elements.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle a manual theme toggle that overrides the system preference, which requires setting a data attribute and using it alongside or instead of the media query. They might also ask about the inheritance behavior of color-scheme, since it is inherited and applies to all elements and text. Another follow-up could be how this interacts with the light-dark CSS function or how to prevent flash of incorrect theme before JavaScript hydrates.

ONE CONCRETE EXAMPLE: Imagine a settings panel with a native select dropdown and a custom calendar widget. You declare color-scheme light dark on the root element so the select dropdown, scrollbars, and page background automatically render in the user's system theme. Then you write media queries for prefers-color-scheme dark to swap your calendar widget's background tokens from white to slate-900 and text from gray-900 to gray-100. If a user enables a forced dark mode in the browser but your marketing page breaks under it, you add color-scheme only light to the hero section to keep it strictly light and prevent UA overrides.

Source: developer.mozilla.org