如何使网页自动适配 Mac 的 Dark Mode

• March 15, 2019 • Read: 30798 • Codes

前段时间 Safari Technology Preview 中添加了对媒体查询 prefers-color-scheme 的支持,该特性可以帮助我们的网页自动切换到深色模式以适配 Mac 中的 Dark Mode(深色模式)。虽然目前 Mojave 10.14.3 版本的 Safari 中尚未添加该特性,但其将随着 Safari 12 在下个小版本(macOS 10.14.4, 10.13.6 and 10.12.6)更新中获得支持。目前最新版本的 Safari 及 Chrome 均已支持该特性。

prefers-color-scheme 可以检测到用户是否已请求操作系统使用浅色或深色主题,其有三个可选的选项:

  • no-preference:未能检测到用户的选择
  • light:用户倾向于使用浅色的主题
  • dark:用户倾向于使用深色的主题,例如用户开启了 Mac 中的深色模式

所以,在这里我们可以使用 prefers-color-scheme: dark 来检测用户是否开启了 Dark Mode。


prefers-color-scheme 的使用很简单,和普通的 Media Query 一样:

/* 操作系统及浏览器未支持或用户未开启 Dark Mode */
body {
    background-color: white;
    color: black;

@media (prefers-color-scheme: dark) {
    /* 操作系统及浏览器支持且用户开启了 Dark Mode */
    body {
        background-color: black;
        color: white;


顺便说一下,目前版本中,如果使用 @supports (prefers-color-scheme: dark) 包裹上述 Media Query 代码,则可能不会生效,这个看上去应该是目前版本浏览器的 Bug。

通过 JavaScript 获取是否开启了深色模式 Dark Mode

很多网站已经有了夜间模式,使用 prefers-color-scheme 适配可能比较麻烦,那么可以使用 JS 获取用户是否开启了 Dark Mode (深色模式),然后按照旧的逻辑开启夜间模式。

这种模式有个缺点:无法像直接使用 Media Query 的情况一样,在用户开启深色模式的时候,已打开的浏览器页面会自动变为深色模式,只有刷新页面或新进入的用户才会使用深色模式,不过个人感觉体验上影响不大。

当然,JS Api 是没有的,这里只能通过迂回的方式通过 JS 获取。


用过 matchMedia 方法可以直接判断浏览器当前是否倾向于使用深色模式:

let prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkMode) {
    // 搞事情

通过监听 matchMediachange 事件,可以在用户切换深色/浅色模式的时候,将浏览器中已打开的页面自动切换为系统对应的模式。

let media = window.matchMedia('(prefers-color-scheme: dark)');
let callback = (e) => {
    let prefersDarkMode = e.matches;
    if (prefersDarkMode) {
        // 搞事情
if (typeof media.addEventListener === 'function') {
    media.addEventListener('change', callback);
} else if (typeof media.addListener === 'function') {


Last Modified: February 18, 2020
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

  1. I think you misspelled the word "bose" on your website. If you want to keep errors off of your site we've successfully used a tool like in the past for our websites. A nice customer pointed out our mistakes so I'm just paying it forward :).

  2. I'm pretty sure you misspelled the word "bose" on your site. You might want to check out a site like or which have helped me with problems like this in the past.

  3. Your site looks great but I did notice that the word "Saus" appears to be spelled incorrectly. I saw a couple small issues like this. I thought you would like to know!

    In case you wanted to fix it, in the past we've used services from a websites like to keep our site error-free.

  4. Hi There,

    Just a heads-up that I believe the word "bose" is spelled wrong on your website. I had a couple of errors on my site before I started using a service to monitor for them. There are a few sites that do this but we like and


  5. It looks like you've misspelled the word "bose" on your website. I thought you would like to know :). Silly mistakes can ruin your site's credibility. I've used a tool called in the past to keep mistakes off of my website.