CSS 黑暗主题媒体查询在 Firefox 和 Chrome 上不起作用？

Question

I recently switched my site to use media queries to change the site's theme from light mode to dark mode.

It works on the Edge browser for desktop and mobile, but doesn't work on Firefox and Chrome (desktop and mobile).

Why aren't these media queries working on Firefox and Chrome, and how can I troubleshoot this issue?

OS Windows 10 system theme is light Chrome Version 90.0.4430.212 Firefox Version Version 88.0.1

 body { /* Black-on-white by default */ background: #fff; color: #000; } @media (prefers-color-scheme: dark) { /* White-on-black if user prefers dark color scheme */ body { background: #000; color: #fff; } }

 <p>Hello, StackOverflow!</p>

Answer 1

Chrome and Firefox also look at the theme preference of your operating system.

If you are on Windows with your operating system theme set to light, even if Chrome and Firefox are dark theme, they will not load webpages in dark theme.

If you change your Windows operating system theme to dark theme, then Chrome and Firefox will change.