个人博客网站怎么适配手机端夜间模式或深色模式

大家对网站的自适应模式都已经清楚了，现在个人博客基本都兼容自适应代码，相比手机端的优势很明显，在PC端、手机端和IPAD端都采用同一套代码，不必再另外解析独立域名，有效避免了网页内容的重复，并能集中精力维护网页，对搜索引擎友好。但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式，从而改善用户在环境光亮低时的阅读体验。很多手机APP应用都已经对夜间模式进行了支持，那么问题来了，对于手机网站来说，个人博客的网站能否支持自适应浅色模式和夜间模式呢？答案是当然可以啦！

早在2020年7月W3C推出的 prefers-color-scheme 的 media 选择器，使得网页能够适配深色模式和浅色模式。

什么是prefers-color-scheme？

W3C 在 2020 年 7 月 31 日发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme，网页现在可以通过条件规则组来获取浏览器宿系统的暗色模式状态并应用了。也就是说，现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的，亮色模式系统访问的页面是亮色的”。

就技术而言我们先就可以很简单地实现手机端浅色和夜间模式的适配，prefers-color-scheme 有 2 种值： 

light——浏览器宿系统使用亮色主题的界面，同时也是默认值，浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值。

dark——浏览器宿系统使用暗色主题的界面。

还有一个已废弃的值： no-preference——浏览器宿系统使用未知主题的界面，当较旧版本的浏览器在宿系统不支持系统层级的暗色模式时会返回这个值，较旧版本的浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值，通过条件规则组就可以作出判断。

CSS代码

@media (prefers-color-scheme: dark) {
    // 暗色模式样式
}
@media not (prefers-color-scheme: dark) {
    // 非暗色模式样式
}

JavaScript

只使用 CSS 条件规则很难实现某些需求，我们可以对 window 使用 matchMedia 方法得到的 Media 使用 matches 方法来获取系统暗色模式状态：

if (window.matchMedia('prefers-color-scheme: dark').matches) {
    // 是暗色模式做什么
} else {
    // 非暗色模式做什么
}

另外还可以监听系统暗色模式的状态，在系统开关暗色模式时作出反应：

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
    if (e.matches) {
        // 系统开启暗色模式后做什么
    } else {
        // 系统关闭暗色模式后做什么
    }
});

其实 prefers-color-scheme 也不是什么新东西了，去年水果就已经在 macOS Mojave 上的 Safari 中添加了它，随后各浏览器不断跟进，现在的兼容性还算不错。

至此通过上面的代码兼容，我们就可以实现手机端深色和夜间模式的自适应兼容，之前在群里看到有人讨论过，然后自己也一致未在意，今天在公众号看新闻时看到了月光博客写的这篇文章教程，自己也百度查看了相关的资料，至于主题是否会增加，带商议后决定了，不要着急，给科技一点时间，哈哈，这句话耳熟么？魅族发布会说的，给科技以时间！好了，教程记录完成，有问题留言反馈自己。