Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
CSS color-scheme tells the browser which color schemes a page supports, so browser-controlled surfaces such as form controls and scrollbars can match light or dark mode. It does not automatically recolor every white card or panel: author-styled page content needs its own dark-mode CSS, typically with @media (prefers-color-scheme: dark).
What color-scheme fixes
The property tells the browser which schemes an element can be rendered in. When a supported scheme is active, the browser can adapt its own interface colors, including form controls, scrollbars, the canvas surface, and other browser-provided UI. That can remove jarring light-colored browser controls from an otherwise dark interface.
The distinction matters: a browser-owned control is not the same as a white box styled by your page. A card with an explicit background-color: white, for example, remains the author’s responsibility. The W3C’s CSS Color Adjustment Module Level 1 explains that many page parts, including form controls and scrollbars, are not under the author’s control; color-scheme communicates with the browser about those surfaces.
Recommended Free Tools
Use it with author-defined dark colors
For a page that supports both schemes, declare that support on the root element, then choose page colors in a dark-mode media query:
#1 Best Overall
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
body {
color: #f2f2f2;
background-color: #171717;
}
.card {
color: #f2f2f2;
background-color: #242424;
border-color: #444;
}
}The sample colors are illustrative, not prescribed values. Add author styles for each page surface that must change in dark mode, such as text, cards, borders, and panels. The light dark value indicates that both schemes are supported; its order does not give light mode priority.
The prefers-color-scheme media feature lets CSS respond to the user’s requested light or dark theme. It handles author-controlled page styling; color-scheme informs the browser about the schemes the page can support.
Rank #2
Tell the browser early with document metadata
Place a color-scheme meta element in the document head before stylesheets. This tells the user agent about the document’s supported schemes early, which can help avoid an unwanted flash while the page loads. It complements CSS; it does not replace the dark-mode rules for your content.
<head>
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="styles.css">
</head>See MDN’s color-scheme meta reference for the element’s documented behavior. MDN says only dark is invalid because forcing a document into a scheme it cannot support may make it unreadable, and reports that major browsers default to light if no other scheme is configured.
Scope the declaration when only part of the interface is themed
The root element is a natural place to declare support when the whole document is designed for both schemes. If only a component or region supports a particular scheme, the declaration can be scoped to that element instead. MDN documents values including only light, light dark, and only dark for selected regions. Use a single-scheme value only when that region remains usable in that scheme.
What happens with embedded content
The prefers-color-scheme feature can also be used by embedded SVG and iframe content; MDN documents cross-origin SVG and iframe cases subject to the relevant embedding conditions. But a host page cannot force arbitrary third-party content to adopt its colors. The embed’s own styles and supported behavior determine how it renders.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
