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

Question

我最近将我的网站改用媒体查询实现了从浅色模式到深色模式的主题切换。

在桌面和移动设备上，Edge 浏览器可以正常工作，但是 Firefox 和 Chrome（桌面和移动设备）无法正常工作。

为什么这些媒体查询在 Firefox 和 Chrome 上不能正常工作？如何解决这个问题？

操作系统是 Windows 10，主题为浅色。Chrome 版本号为 90.0.4430.212，Firefox 版本号为 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>

- Stack Attack

---

对我来说可以运行。Chrome 90.0.4430.212 在 Windows 10 上，操作系统颜色模式设置为“暗黑模式”。Firefox 88.0 同样如此。 - Phil

是的，它运行良好。如果您列出操作系统和确切版本，将会很有帮助。这是一个重要的功能，通常不会出现故障。它已经在数千个项目中使用了。 - Dominic

我正在使用Windows 10，我的系统设置为浅色模式。我把Firefox和Chrome改成了深色模式，但是没有生效 :/ - Stack Attack

已解决！问题出在我的系统操作主题（Windows）是浅色主题。当 Windows 是深色主题时，它就可以工作了。 - Stack Attack

Answer 1

Chrome和Firefox还会查看您操作系统的主题偏好设置。

如果您使用Windows，操作系统主题设置为浅色，则即使Chrome和Firefox使用暗色主题，它们也不会以暗色主题加载网页。

如果您将Windows操作系统主题更改为暗色主题，则Chrome和Firefox也会更改为暗色主题。

- Stack Attack