Css 如何检测操作系统是否在浏览器中处于暗模式

发布于10月25日

有没有人发现有没有办法在Safari/Chrome/Firefox中检测用户的系统是否处于新的OSX暗模式？

我们想改变我们的网站的设计，以黑暗模式友好的基础上，目前的运营模式.

推荐答案

如果用户首选项为light:

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

如果用户偏好为dark:

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

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

EDIT(2018年12月7日):

在Safari Technology Preview Release 71年，他们宣布了Safari中的切换switch ，以使测试变得更容易.我还设置了test page，以查看浏览器行为.

如果您安装了Safari Technology Preview Release 71，您可以通过以下方式激活:

开发>；实验特性>；暗模式CSS支持

然后，如果您打开test page并打开元素判断器，您就会有一个新图标来切换暗/亮模式.

EDIT(2019年2月11日):

EDIT(2019年9月5日): 目前世界上有25%的人可以使用暗模式CSS.来源:caniuse.com

即将推出的浏览器:

iOS 13(我猜它将在苹果的主旨演讲后于下周出货)

EdgeHTML 76(不确定何时发货)

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

EDIT(2020年2月3日):微软Edge 79支持暗模式.(2020年1月15日发布)

我的建议是:您应该考虑实现暗模式，因为大多数用户现在都可以使用它(针对您站点的夜间用户).

Note:除:IE，<%s>Edge外，所有主要浏览器现在都支持深色模式

EDIT(2020年11月19日): 目前，世界上88%的人可以使用暗模式CSS.来源:caniuse.com

CSS框架Tailwind CSS v2.0支持暗模式.(2020年11月18日发布)

EDIT(2020年12月2日):

Google Chrome将黑暗主题模拟添加到开发工具中.来源:developer.chrome.com