Free tools Windows power users keep installed
One-click scans. No signup required.
The CSS property is color-scheme. It tells the browser which color schemes your page supports, so browser-controlled surfaces—such as form controls and scrollbars—can match dark mode. It does not recolor every white box on the page: backgrounds and other surfaces you style yourself still need dark-mode CSS.
What color-scheme fixes
Set color-scheme to tell the browser which schemes an element can be rendered in. The browser may then adapt its own interface colors, including form controls, scrollbars, and other browser-provided UI. This is useful when native controls stay glaringly light against a dark page.
As an Amazon Associate I earn from qualifying purchases.
The distinction matters: browser-controlled UI is not the same as page content. A panel with an explicit background-color: white is author-styled, so the browser does not automatically turn it dark just because the page declares color-scheme. The W3C describes the boundary this way: “While the prefers-color-scheme media feature allows an author to adapt the page’s colors to the user’s preferred color scheme, many parts of the page are not under the author’s control (such as form controls, scrollbars, etc).” W3C CSS Color Adjustment Module Level 1
Use color-scheme with your own dark-mode styles
For a page that supports both light and dark appearance, declare both schemes on the document root, then use prefers-color-scheme to style your own page colors according to the user’s preference:
#1 Best Overall
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
body {
color: #f2f2f2;
background-color: #171717;
}
}The sample colors are illustrative; choose colors that suit your design. The light dark value signals support for both schemes—it is not a priority order. Add dark-mode rules for any author-styled surfaces that need to change, such as cards, borders, and text. MDN: color-scheme MDN: prefers-color-scheme
Tell the browser about the scheme early
You can also put a color-scheme declaration in the document head, before your stylesheets. This gives the browser the information early and can help avoid an unwanted flash while the page loads:
Rank #2
<head>
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="styles.css">
</head>The metadata complements your CSS; it does not replace the rules that set dark colors for your own page content. See MDN’s color-scheme meta reference.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallScope themes carefully
A root declaration is appropriate when the whole document supports both schemes. If only a component or region is designed for a particular scheme, color-scheme can instead be scoped to that element. MDN documents values including only light, light dark, and only dark; use a single-scheme declaration only when the region is genuinely usable in that scheme.
MDN documents only dark as invalid for the meta element because forcing a document into a scheme it cannot support may make it unreadable. Its reference says major browsers default to light if no other scheme is configured. MDN: <meta name="color-scheme">
Embedded content and theme toggles
prefers-color-scheme can also be used by embedded SVG and iframe content, including documented cross-origin cases when the embedding conditions are met. A host page cannot necessarily recolor an arbitrary third-party embed; the embedded content may control its own appearance. MDN: prefers-color-scheme
The examples above follow the user’s system preference. If your site has its own theme toggle, treat that selection as application state and ensure it takes precedence in your own styles; color-scheme and prefers-color-scheme alone do not implement the toggle’s behavior.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
