Firefox：如何测试偏好颜色方案？

Posted 2023-03-06

【中文标题】Firefox：如何测试偏好颜色方案？

【英文标题】：Firefox: How to test prefers-color-scheme?

【发布时间】：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 developer.mozilla.org/en-US/docs/Web/CSS/:root

当然可以，但你为什么要在此处添加空选择器？

@rubo77 啊，我的错，我想根据用户偏好在其中放置一些变量，但这对于最小的工作示例来说是不需要的。

【参考方案1】：

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

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

---

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

【讨论】：

在最新版本的 Firefox 中，默认启用此功能，因此您无需再更改 about:config 中的任何内容，它现在有两个设计略有不同的按钮，但同时位置。

见the official documentation for this feature on MDN。

感谢@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。

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