如何检测 OS 是否在浏览器中处于暗模式？

Question

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

有没有人发现有没有办法检测用户的系统是否处于 Safari/Chrome/Firefox 中新的 OS X 深色模式？

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

Answer 1

我搜索了 Mozilla API，它们似乎没有任何与 browser-windows 颜色对应的变量。尽管我找到了一个可能对您有帮助的页面：How to Use Operating System Styles in CSS。尽管 article-header Chrome 和 Firefox 的颜色不同。

Answer 2

Spec 已启动（见上文），可作为媒体查询使用。 Something has already landed in Safari, see also here。所以理论上你可以在 Safari/Webkit:

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

在 MDN 上，CSS 媒体功能 inverted-colors 是 mentioned. Plug: I blogged about dark mode here。

Answer 3

新标准注册于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。

EDIT (7 dec 2018):

在 Safari Technology Preview Release 71 they announced a toggle switch in Safari to make testing easier. I also made a test page 中查看浏览器行为。

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

Develop > Experimental Features > Dark Mode CSS Support

然后，如果您打开 test page 并打开元素检查器，您将有一个新图标来切换 Dark/Light 模式。

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

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

Upcoming browsers:

iOS 13 ( I guess it will be shipped next week after Apple's Keynote)

EdgeHTML 76 (not sure when that will be shipped)

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

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

My suggestion would be: that you should consider implementing dark mode because most of the users can use it now (for night-time users of your site).

Note: All major browsers are supporting dark mode now, except: IE, ~~Edge~~

EDIT (19 Nov 2020): Currently 88% of the world can use dark mode CSS. Source: caniuse.com

CSS-framework Tailwind CSS v2.0 supports dark-mode. (released on 18 Nov 2020)

EDIT (2 Dec 2020):

Google Chrome adds Dark Theme emulation to Dev Tools. Source: developer.chrome.com

EDIT (2 May 2022):

Currently 90% of the world can use dark mode CSS. Source: caniuse.com

Answer 4

如果你想从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";
});

Answer 5

根据 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; }

如何检测 OS 是否在浏览器中处于暗模式？

How to detect if the OS is in dark mode in browsers?

css

safari

macos

media-queries

darkmode