【问题标题】:How to detect if the OS is in dark mode in browsers?如何检测操作系统是否在浏览器中处于暗模式?
【发布时间】:2018-11-23 05:01:05
【问题描述】:

类似于“How to detect if OS X is in dark mode?”,仅适用于浏览器。

有没有人发现是否有一种方法可以检测用户的系统是否处于 Safari/Chrome/Firefox 中的新 OS X 暗模式?

我们希望根据当前的操作模式将网站的设计更改为对暗模式友好。

【问题讨论】:

  • 据我所知,Safari 没有 CSS 媒体查询来检测浅色或深色模式,但 Safari 绝对支持 HTML 页面中的深色小部件。为它归档雷达可能会有所帮助。
  • 别打我,但在Stackoverflow introduced the dark modegoogled 他们如何实现“系统”模式并偶然发现了这个问题。我预计会有很多流量 :-)

标签: css macos safari media-queries darkmode


【解决方案1】:

新标准在W3C in Media Queries Level 5注册。

注意:目前仅适用于Safari Technology Preview Release 68

如果用户偏好是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。

编辑(2018 年 12 月 7 日):

Safari Technology Preview Release 71 中,他们宣布了 Safari 中的切换开关,以简化测试。我还发了一个test page 来查看浏览器的行为。

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

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

然后,如果您打开 test page 并打开元素检查器,您就会有一个新图标来切换暗/亮模式。


编辑(2019 年 2 月 11 日): Apple 在新的 Safari 12.1 暗模式下发货


编辑(2019 年 9 月 5 日): 目前全球 25% 的人可以使用深色模式 CSS。来源:caniuse.com

即将推出的浏览器:

  • iOS 13(我猜它会在 Apple 的 Keynote 之后下周发货)
  • EdgeHTML 76(不确定何时发货)

编辑(2019 年 11 月 5 日): 目前全球 74% 的人可以使用深色模式 CSS。来源:caniuse.com


编辑(2020 年 2 月 3 日):Microsoft Edge 79 支持深色模式。 (2020 年 1 月 15 日发布)

我的建议是:您应该考虑实施暗模式,因为大多数用户现在都可以使用它(对于您网站的夜间用户)。

注意:目前所有主流浏览器都支持深色模式,除了:IE、Edge


编辑(2020 年 11 月 19 日): 目前全球 88% 的人可以使用深色模式 CSS。来源:caniuse.com

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


编辑(2020 年 12 月 2 日):

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

【讨论】:

  • 刚刚测试过了。如果您在 mac os 设置中更改主题,则需要重新启动浏览器。太糟糕了,它没有即时同步。
  • @HermanStarikov 我发布了关于您所描述的这个问题的更新。使用新的 Safari Technology Preview Release 71,您可以实时切换。
  • 不错!我做了一个小演示,展示了使用引导程序的主题:twitter.com/Hermanhasawish/status/1071517994302562305
  • 有没有办法在 JavaScript 中检测到这一点?
  • @AkashKava 我在 Google 上搜索了一下,是的,如果你使用这样的东西是可能的:window.matchMedia("(prefers-color-scheme: dark)").matches 如果我有空闲时间,我会在我的答案中添加一个完整的 javascript 解决方案。
【解决方案2】:

根据 Mozilla,这是截至 2020 年的首选方法

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

对于 Safari/Webkit 你可以使用

@media (prefers-dark-interface) { background: #000; }

【讨论】:

    【解决方案3】:

    如果你想从 JS 中检测,可以使用这段代码:

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // dark mode
    }
    

    观察变化:

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
        const newColorScheme = e.matches ? "dark" : "light";
    });
    

    【讨论】:

    • 嗨!这很好用。不过我很好奇——这种语法究竟是如何工作的?
    • @Stormblessed 首先会检查浏览器是否支持matchMedia,然后会尝试匹配prefers-color-scheme: dark 字符串。如果匹配,我们就处于暗模式。
    • 有了新的 Elvis 运算符,这可以写成if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
    • 哦,有道理! .matches 的语法看起来像是在做第一件事和第二件事之间的比较。谢谢!
    • @MarkSzabo 您的代码确实有效,但不像addListener 那样跨平台兼容,请参见此处:developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/… 所以应该是:window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { this.darkMode = e.matches; });
    【解决方案4】:

    目前(2018 年 9 月)being discussed in "CSS Working Group Editor Drafts" 规范已发布(见上文),可作为媒体查询使用。 Something 已经登陆 Safari,另见 here。所以理论上你可以在 Safari/Webkit 中做到这一点:

    @media (prefers-dark-interface) { color: white; background: black }
    

    但这似乎是 private 在 MDN 上,CSS 媒体功能 inverted-colorsmentioned。 Plug:我在博客上写过暗模式 here

    【讨论】:

    • 不要使用inverted-colors 来检测暗模式。 首先,它不起作用。其次,它用于可访问性,而不是美学。一些用户使用倒置模式来增强屏幕的对比度,如果他们有视力障碍,这是典型的。请不要根据inverted-colors 更改您网站的外观,因为它充其量不会按照您的意愿运行,最坏的情况是会让这些用户感到沮丧。
    【解决方案5】:

    我搜索了 Mozilla API,它们似乎没有任何与浏览器窗口颜色对应的变量。虽然我找到了一个可能对您有所帮助的页面:How to Use Operating System Styles in CSS。尽管有文章标题,但 Chrome 和 Firefox 的颜色不同。

    【讨论】:

    猜你喜欢
    • 2022-12-05
    • 2021-08-16
    • 2019-09-05
    • 2021-12-25
    • 1970-01-01
    • 2010-11-06
    • 2014-10-02
    • 2019-02-22
    相关资源
    最近更新 更多