让网站适配 Dark Mode
在 macOS 发布了 10.15.1 这个体积超大的更新版之后，决定这个周六把开发机（10.14.6）升级了，毕竟是开发机只能一直在新版和稳定的边缘试探 。
然而我的手机早就已经升级到最新版的 13.2 了，其中最让我不爽的是 iOS13 的 “Reminders” 竟然是和 Mojave 不兼容的，Apple 竟然搞出这样的骚操作来。
丫的系统版本刷新得倒挺快，这么重要的 APP 最起码的向下兼容竟然不搞，学互联网公司的作风得学全套啊 ♂️。
iOS UI 层面感受最深刻的就是 Automatic Dark Mode（自动暗黑模式），Mojave 虽然也有 Dark Mode，但是不能自动切换。
个人感觉在使用上白天还是 Light Mode（浅色模式）好用，所以晚上就得手动切换，然后就懒得用了，能自动化操作的事情为什么要让用户手动切换？
Night Shift（夜览）就很赞，切换得很自然。
好在 Catalina 终于也支持了 Automatic Dark Mode，然后发现适配 Dark Mode 的网页太少了，系统和网页对比，太突兀了。
当然 Dark Mode 出来没多久，适配还是需要时间，许多 APP 都还没适配更别提网页了，甚至连 Apple 官网都还没适配呢，所以我当时就决定，先把我自己的博客给适配了。
美好的事物总是会来的:ok_woman|type_1_2:♂️。
首先是收集相关的技术信息。
针对 Dark Mode 已经有相关的规范：
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.
技术上就是通过 CSS 媒体类型标签 @media 和 系统主题这个特征 prefers-color-scheme 在 CSS 层面由浏览器做样式计算然后渲染，当然还可以定义其他主题样式：light、grey 啥的。
:root {
--background-color: #FFF;
}
@media (prefers-color-scheme:dark) {
--background-color: #000;
}
.body {
background-color: var(--background-color);
}
涉及到前端我们得知道现在浏览器对该特征的支持情况：
https://caniuse.com/#search=prefers-color-scheme
按照 Apple 开发规范， iOS 版的微信用的是 Safari 内核，理论上应该是支持的，但是现实打脸了，不知道中间做了什么“优化”。
了解了实现原理之后，就知道适配主要就是对颜色、对比度、透明度等等 CSS 属性的处理，页面结构其实并没有变化，所以接下来就是处理颜色。
因为没有设计师，我只能先去了解关于 Dark Mode 的设计规范，然后自己鼓捣一番。
Apple Visual Design： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
Google Material Design： https://material.io/design/color/dark-theme.html
网友分享的颜色搭配： https://colorhunt.co/palettes/dark
设计师的经验： https://www.zcool.com.cn/article/ZMTAxMjAxNg==.html
一番实验后，终于确认了颜色搭配，然后就是编码实战了。
因为我的博客本身走的是简约风，所以 Light Mode 大都是 黑、灰、白，虽然颜色都很接近，但实际上却不相同，灰色都有好多种:weary:，真“你说的灰是什么灰，你说的白是什么白”。
尝试 N 次之后，终于确认了最终版颜色，颜色的搭配很重要，不然会出现对比度太高，亮瞎眼，对比度太低，看得很费劲，最终都降低可读性。
小建议，不能完全追求纯黑，这样对整体背景还是不能太黑，如果太黑，文字的对比度很高，并不适合阅读，这块可以参考下 Apple 的自带 APP 的设计，比如 Safari：
顺利得有点诡异，果不其然，验收测试的时候掉入了另外一个坑：第三方组件适配。
修改完毕后，博客本身是能支持 Dark Mode 了，但是作为一个技术博客最主要的代码高亮不支持 ♂️ 。
因为 @media 本质上是一个 CSS 的语法，作用域有限，所以需要第三方组件自身支持 Dark Mode 才行。
经过梳理之后，很幸运，本博只引用了代码高亮这一个外部组件，针对性做处理即可。
但是毕竟是第三方组件，也不能去修改其源码，于是干脆分 Dark 和 Light 两种模式，各采用一种主题即可 。
使用同时为了优化性能，减少额外的资源加载，通过模式的不同，直接加载不同的 CSS 主题资源即可，Javascript 简化代码如下：
if(window.matchMedia("(prefers-color-scheme:dark)").matches){
// load dark mode theme css
}else{
// load light mode theme css
}
测试通过。
自此本博 Dark Mode 支持完毕。
整个适配过程其实主要是颜色的搭配和替换，更多的是一个体力活。
本博还算是很简单的，因为页面简单、样式分离比较彻底，所以改动点都很聚焦，现在的 APP 都走的是模块化、插件化了，那适配起来各个模块都得改，更别提微信这样有大量第三方服务接入的 APP 了，成本不言而喻，也能理解 APP 的适配难度了，不是换个颜色就行的，还得考虑用户体验，不能产生新的割裂感。
并且适配 Dark Mode 并没有明显的收益，ROI 太低，也是企业不积极的原因吧。
但是如果公司结构比较合理，包括但不限于：技术架构、部门架构，这样设计规范统一、技术组件统一，甚至只用批量处理即可低成本完成适配。
好的架构真的是项目进步的基石。
当然随着大家对 Dark Mode 的接纳度越来越高，适配方也会越来越多，美好的事物总是值得被推崇的:ok_woman|type_1_2:♂️。
本文由程小白创作，本文可自由转载、引用，但需署名作者且注明文章出处。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
