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

piah890a 于 2023-04-13 发布在其他

关注(0)|答案(3)|浏览(145)

在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的计算结果为true？
我发现了一个插件，似乎做的伎俩，但我必须做一些错误的与我自己的CSS，因为它不工作在我的网页。

css

来源：https://stackoverflow.com/questions/56401662/firefox-how-to-test-prefers-color-scheme

3条答案

按热度按时间

xsuvu9jc1#

从Firefox 87开始，devtools中测试prefers-color-scheme的功能默认是启用的，不需要设置任何配置标志，你可以在inspector标签中找到它：

选择日光按钮模拟灯光模式;
选择月亮按钮模拟黑暗模式;
如果没有选择任何按钮，则将正常使用您的操作系统默认值。

在一些旧版本的Firefox中，此功能存在于标志后面。要在其中一个版本上进行测试，您可以通过转到about:config并将devtools.inspector.color-scheme-simulation.enabled属性设置为true来启用此功能。完成后，您将在与现代devtools相同的位置找到它的控件，但作为单个画笔图标，而不是今天的太阳/月亮切换按钮。

赞(0）回复(0）举报 2023-04-13

vlju58qv2#

您可以通过转到about:config并添加一个值为1的整数类型的新属性ui.systemUsesDarkTheme来更新Firefox使用的样式。
它不会像在Windows或Mac中更新操作系统设置时那样自动更新活动页面上的值，但如果您在更新后刷新页面，它会自动选择。
您可以通过查看mdn上的示例来确认浏览器设置是否正确
编辑：在firefox71上，更新应用于活动页面而不刷新

赞(0）回复(0）举报 2023-04-13

daolsyd03#

为了完整起见：如果一切都失败，则存在Firefox add-on called “Dark Website Forcer”（also on GitHub）。
它通过阅读网站的CSS并重新应用黑暗版本的部分来改变风格，如果你想有一个黑暗的版本。因此，它也只能强制一个黑暗的网站，* 而不是 * 光明的网站。自述文件有详细的解释。

**披露：**我是此附加组件的作者。🙂

赞(0）回复(0）举报 2023-04-13

我来回答

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

3条答案

相关问题

热门标签

最新问答