网站跟随系统浅/深色模式的方式

本篇文章皆指网站自动跟随系统浅/深色模式，因此无需用户进行手动切换，也不存在需要进行任何前端缓存的问题。

本文教程支持JS或CSS两种方法来处理网站跟随系统浅/深色模式。

一、基于JS的方法

通过JavaScript来获取系统的浅/深色模式，如下代码可以判断出系统当前是否为浅/深色模式：

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    console.log('dark')
} else {
    console.log('light')
}

上述代码做出了判断但还不够，还需要对HTML进行一些改造。

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    document.documentElement.classList.add("dark");
}

如果当前系统为深色模式，上述JS会自动在页面HTML标签上加上一个名为“dark”的Class值，此段代码我们可以放置在HTML标签的上面一行中，在页面加载前便需要执行。

监听模式变化

经过测试发现，上述代码存在一个问题，如果用户先打开了网站，而后在进行了系统颜色模式切换且未刷新网站页面，网站一时间无法做出完美跟随，所以还需要对系统颜色模式进行实时监听，需要使用addEventListener方法。

window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', function(e) {
    if (e.target.matches) {
      document.documentElement.classList.add("dark");
    }
  });

监听 + 判断才能完美实现跟随，最终代码如下，需放置在HTML标签的上面。

const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
  if (themeMedia.matches) {
    document.documentElement.classList.add("dark");
  }
  themeMedia.addEventListener('change', function(e) {
    if (e.target.matches) {
      document.documentElement.classList.add("dark");
    }
  });

之后便可以编写深色模式CSS了，在样式选择器前加上“.dark”即可，适当配合“!important”的使用。

二、基于CSS的方法

在CSS中可以使用利用媒体属性 preferred-color-scheme，如下代码示例。

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

将浅/深模式不同元素的颜色样式放置于不同媒体属性中即可。