Firefox:如何测试首选颜色方案? [英] Firefox: How to test prefers-color-scheme?

问题描述

在Firefox 67中，人们可以使用媒体查询来检测用户对浅色或深色主题的偏好

.

在我的Firefox(在Ubuntu下)版本中，我的偏好似乎是轻主题.也就是说，以下CSS给出了蓝色背景:

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

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

我发现了一个似乎可以解决问题的加载项，但是我自己的CSS一定做错了，因为它在我的页面上不起作用. 黑暗的网站强制工具

解决方案

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

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

您可以通过查看关于mdn的示例

在firefox 71上，更新无需更改即可应用于活动页面

In Firefox 67, one can use media queries to detect user preference on light or dark theme.

In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background:

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

How can I change my Firefox preferences so that prefers-color-scheme: dark evaluates to true?

I found an add-on that seems to do the trick, but I must be doing something wrong with my own CSS, as it does not work on my page. Dark Website forcer

解决方案

You can update the style used by Firefox by going to about:config and adding a new property ui.systemUsesDarkTheme of integer type with value 1.

It doesn't automatically update the value on active pages in the same way that it does when you're updating OS settings in Windows or Mac, but if you refresh the page after updating it will pick up.

You can confirm the browser setting is correct by viewing the example on mdn

Edit: On firefox 71 the update is applied to active pages without refresh

这篇关于Firefox:如何测试首选颜色方案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！