【问题标题】:Firefox: How to test prefers-color-scheme?Firefox:如何测试偏好颜色方案?
【发布时间】:2019-10-17 11:48:04
【问题描述】:

在 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

【问题讨论】:

  • 这对你没有多大帮助,但在 macOS 上,我只能在 Preferences > General中更改它才能更改它>。 :|
  • :root 属性有什么用?
  • 当然可以,但你为什么要在此处添加空选择器?
  • @rubo77 啊,我的错,我想根据用户偏好在其中放置一些变量,但这对于最小的工作示例来说是不需要的。

标签: css media-queries themes


【解决方案1】:

好消息——从 Firefox 87 开始,现在默认启用此功能,无需设置配置标志!您可以在检查器选项卡中找到它:

  • 选择太阳按钮模拟灯光模式;
  • 选择月亮按钮模拟暗模式;
  • 如果未选择任何按钮,将照常使用您的操作系统默认设置。

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

【讨论】:

  • 在最新版本的 Firefox 中,默认启用此功能,因此您无需再更改 about:config 中的任何内容,它现在有两个设计略有不同的按钮,但同时位置。
  • 感谢@rugk 告诉我,我已经相应地更新了答案!
【解决方案2】:

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

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

您可以通过查看example on mdn来确认浏览器设置是否正确

编辑: 在 Firefox 71 上,更新应用于活动页面而无需刷新

【讨论】:

  • 这如描述的那样工作。在 Linux Mint 19.1 和 Firefox 67.0.4 上测试。
  • 为什么这个首选项这么难找?
  • 仅供参考:要添加新属性,您必须右键单击 about:config 上的任意位置 :)
  • 注意,新值必须是整数,如上所述,boolean true 不起作用!
  • 在我的情况下(在带有 GNOME 的 Fedora/Linux 上),这在 Firefox 83 中似乎不再起作用——即使在重新启动后也是如此。
【解决方案3】:

为了完整起见:如果一切都失败了,有一个Firefox add-on called “Dark Website Forcer (also on GitHub)。
如果您想要一个深色版本,它会通过读取网站的 CSS 并重新应用深色版本的部分来更改样式。因此,它也只能强制一个黑暗的网站,而不是光明的网站。自述文件has a detailed explanation why

披露:我是这个插件的作者。 ?

【讨论】:

    猜你喜欢
    • 2019-10-11
    • 1970-01-01
    • 2019-12-27
    • 1970-01-01
    • 1970-01-01
    • 2011-01-03
    • 2019-03-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多