如何在浏览器中检测操作系统是否处于暗模式? [英] How to detect if the OS is in dark mode in browsers?

问题描述

类似于">如何检测OS X处于暗模式?"仅适用于浏览器.

Similar to "How to detect if OS X is in dark mode?" only for browsers.

是否有人能找到一种方法来检测用户的系统是否处于Safari/Chrome/Firefox中新的OS X暗模式下?

Has anyone found if there is a way to detect if the user's system is in the new OS X Dark Mode in Safari/Chrome/Firefox?

我们希望基于当前的操作模式将网站的设计更改为暗模式友好.

We would like to change our site's design to be dark-mode friendly based on the current operating mode.

推荐答案

新标准已在媒体查询第5级的W3C .

注意::当前仅在 Safari技术预览版68

NOTE: currently only available in Safari Technology Preview Release 68

如果用户偏好设置为light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #000;
        color: white;
    }
}

如果用户首选项为dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: white;
    }
}

如果用户没有偏好，还可以使用选项no-preference.但是我建议您仅在这种情况下使用普通的CSS并正确地级联CSS.

There is also the option no-preference in case a user has no preference. But I recommend you just to use normal CSS in that case and cascade your CSS correctly.

编辑(2018年12月7日):

EDIT (7 dec 2018):

在 Safari Technology Preview版本71 中，他们宣布了切换开关在Safari中简化测试.我还制作了一个测试页以查看浏览器的行为.

In Safari Technology Preview Release 71 they announced a toggle switch in Safari to make testing easier. I also made a test page to see the browser behaviour.

如果您已安装 Safari Technology Preview版本71 ，则可以通过以下方式激活:

If you have Safari Technology Preview Release 71 installed you can activate through:

开发>实验功能>暗模式CSS支持

Develop > Experimental Features > Dark Mode CSS Support

然后，如果您打开测试页并打开元素检查器，则会有一个新图标来切换暗/亮模式

Then if you open the test page and open element inspector you have a new icon to toggle Dark/Light mode.

-

编辑(2019年2月11日): Apple以新的 Safari 12.1 暗模式

EDIT (11 feb 2019): Apple ships in the new Safari 12.1 dark mode

-

编辑(2019年9月5日): 目前，世界上有25％的人可以使用深色模式CSS.来源: caniuse.com

EDIT (5 sep 2019): Currently 25% of the world can use dark mode css. Source: caniuse.com

即将到来的浏览器:

• iOS 13(我想它将在Apple的Keynote发布后的下周发布)
• EdgeHTML 76(不确定何时发货)

-

编辑(2019年11月5日): 目前，世界上有74％的人可以使用暗模式CSS.来源: caniuse.com

EDIT (5 nov 2019): Currently 74% of the world can use dark mode css. Source: caniuse.com

-

编辑(2020年2月3日):Microsoft Edge 79支持暗模式. (于2020年1月15日发布)

EDIT (3 feb 2020): Microsoft Edge 79 supports dark mode. (released on 15 jan 2020)

-

我的建议是:您应该考虑实现暗模式，因为大多数用户现在都可以使用它(特别是为了节省移动电话的电量).

My suggestion would be: that you should consider to implement dark mode because most of the users can use it now (especially for mobile aka battery saving).

注意::除IE， Edge

这篇关于如何在浏览器中检测操作系统是否处于暗模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！