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

Question

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

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

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

Answer 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。

EDIT (7 dec 2018):

在Safari Technology Preview Release 71他们在 Safari 中宣布了一个切换开关，以使测试更容易。我还做了一个 test page查看浏览器行为。

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

Develop > Experimental Features > Dark Mode CSS Support

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

---

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