有时候我也很佩服自己，这么简单的一个功能，写写也就几个小时，一年多前就想搞了，竟然给我拖到现在才装上去。拖延症，恐怖如斯！
以前我对深色模式其实不怎么感冒，主要感觉开了也没啥用，就系统界面变黑了，其他 App 里还是白色的，等于没开。不过这几年大部分应用的适配都跟上来了，体验也就好起来了，晚上玩手机看着不那么刺眼，挺好的。
现在浏览器网页也支持检测用户的系统主题色，所以我也凑个热闹，给博客加上了自动切换浅色/深色主题的功能。适配过程还是挺顺利的，记录一下供参考。
原理
就是使用 CSS 的 prefers-color-scheme 媒体查询。
@media (prefers-color-scheme: dark) { /* dark theme styles go here */}
参考文档：prefers-color-scheme - CSS | MDN
不过需要注意的是，不支持 IE。
使用方法
最简单的例子：
body { background-color: white; color: black;}@media (prefers-color-scheme: dark) { body { background-color: black; color: white; }}
这样在亮色模式下是白底黑字，在暗色模式下就是黑底白字。
依样画葫芦，给原主题中颜色相关的 CSS 加上对应的深色样式就差不多了。
使用 mixin 处理颜色
拿我自己写的这个主题举例，在主题中我们一般会用到很多颜色。一个常见的做法就是使用 CSS 预处理器，把这些颜色定义成变量方便后续使用（我用的是 Stylus）：
$color-primary = convert(hexo-config('primary_color'));$color-background = #fff;$color-text = #333;$color-text-secondary = #999;
同样，定义这些颜色的深色版本：
$color-primary-dark = convert(hexo-config('primary_color_dark'));$color-background-dark = #181a1b;$color-text-dark = #c8c3bc;$color-text-secondary-dark = #a8a095;
引用之：
body { background-color: $color-background; color: $color-text;}a { color: $color-primary;}@media (prefers-color-scheme: dark) { body { background-color: $color-background-dark; color: $color-text-dark; } a { color: $color-primary-dark; }}
然而问题来了，这样岂不是要写很多媒体查询语句？麻烦且不说，看着都眼花。如果把不同地方的这些语句集中起来，放在一起，又会破坏模块设计，也不利于后续维护。
想要写得简洁一点，不妨利用 CSS 预处理器的 mixin 特性。
定义 mixin（可以理解为可重用的代码片段）：
// 根据传入参数拼装变量名color-themed(name) { color: lookup('$color-' + name); @media (prefers-color-scheme: dark) { color: lookup('$color-' + name + '-dark'); }}
这个 mixin 的意思就是我们传一个名称进去，它会根据这个名称去查找对应的颜色变量及其深色版本，然后一起应用。
如此一来，上面的样式就可以简化为：
body { background-color-themed: 'background'; color-themed: 'text';}a { color-themed: 'primary';}
使用 CSS 变量处理颜色
用上面那种方法，比原来的是好了不少，但感觉不太直观。
另一种方法，就是用 CSS 原生的变量机制来处理颜色。定义变量：
:root { --color-primary: #7065a3; --color-background: #fff; --color-text: #333; --color-text-secondary: #999;}@media (prefers-color-scheme: dark) { :root { --color-primary: #bb86fc; --color-background: #181a1b; --color-text: #c8c3bc; --color-text-secondary: #a8a095; }}
使用：
body { background-color: var(--color-background); color: var(--color-text);}a { color: var(--color-primary);}
是不是清爽了很多呢？
不过遗憾的是，IE 浏览器不支持 CSS 变量。（又是你！！！🙃
所以为了兼容性我还是选了预处理器 + mixin 的方法，这样在 IE 上虽然不能自动切换，但至少能保证默认的浅色主题是可以正常显示的。而如果全部使用 CSS 变量的话，在不支持的浏览器上就啥都没有了，得考虑 polyfill 和 fallback，还是算了。
如果不用考虑兼容旧浏览器的话，CSS 变量是最佳选择。
加载外部样式
使用 link 标签加载的外部 CSS 也可以指定媒体查询。
比如本主题使用的 highlight.js 代码高亮的样式：
<link rel="stylesheet" href="atom-one-dark.min.css" media="screen and (prefers-color-scheme: dark)"><link rel="stylesheet" href="atom-one-light.min.css" media="screen and (prefers-color-scheme: light)">
这样在浅色模式下会加载 light 样式，在深色模式下会加载 dark 样式。
参考
另外，关于深色模式下的图片要如何处理，其实也是需要考虑的。
不过我懒，就直接不管了。更详细的相关内容可以参考：
最后是自动切换的效果图（视频）：
Login
