Firefox：如何测试首选颜色方案？

Question

在Firefox 67中，人们可以使用媒体查询来检测用户preference on light or dark theme.

在我的Firefox版本（在Ubuntu下）中，我的偏好似乎是轻主题。也就是说，以下CSS给出了蓝色背景：

@media (prefers-color-scheme: light) {
   :root {}
  body {
    background-color: blue;
  }
}

如何更改Firefox首选项，以便prefers-color-scheme: dark 评估为真？

我发现一个似乎可以解决问题的加载项，但是我自己的CSS一定做错了，因为它在我的页面上不起作用。 Dark Website forcer

Answer 1

执行此操作的另一种方法是转到about:config，然后将devtools.inspector.color-scheme-simulation.enabled属性设置为true。

这会在devtools检查器选项卡上添加一个按钮，使您可以在当前页面上的模拟亮模式和暗模式之间快速切换。

最终，此功能将不再隐藏在标志后面。您可以在Bugzilla上跟踪其进度。截至2020年11月，还有a new bug用于默认启用此标志。

Answer 2

仅出于完整性考虑：如果所有操作失败，就会出现Firefox add-on called “Dark Website Forcer”（also on GitHub）。
如果您要使用深色版本，则可以通过阅读网站的CSS并重新应用深色版本的部分来更改样式。因此，它也只能强制一个黑暗的网站，不能一个明亮的网站。自述文件has a detailed explanation why。

公开：我是该加载项的作者。 ?

Answer 3

您可以通过以下方法更新Firefox使用的样式：转到about:config，并添加一个值为ui.systemUsesDarkTheme的整数类型的新属性1。

它不会像在Windows或Mac中更新操作系统设置那样自动更新活动页面上的值，但是如果在更新后刷新页面，它将自动显示。

您可以通过查看example on mdn

来确认浏览器设置正确无误