Firefox:如何测试首选颜色方案?

时间:2019-05-31 20:58:21

标签: css media-queries themes

在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

3 个答案:

答案 0 :(得分:38)

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

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

enter image description here

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

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

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

您可以通过查看example on mdn

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