实现用户自定义主题深浅模式浏览站点

发表于： 更新于： 分类于：
字数： 1009 阅读：≈ 3分钟 浏览： 评论：

如今大部的网站都实现了深浅主题2种不同模式的配色，比如说程序员大多喜欢深色模式，或许是需要长时间使用电脑，该模式能够一定程度上保护视力。从表面现象上来看，实现这一功能需要 CSS 和 JavaScript 两者搭配着一起使用，但当深入以后发现有些没料想的事情，且听我慢慢叙说。

本博客主题是基于Hexo NexT移植过来的，在移植过程中就曾有注意在到在 _colors.scss 文件中存在一段 prefers-color-scheme: dark 媒体自适应代码，当时不太明白其中的具体的作用，只知道当配置文件中的参数 darkMode:true 便会增加这段代码渲染，但随着此次给主题增加深浅主题切换功能时，才发现其中的奥妙，也是让自己走了不少的弯路。

在 MacOS 或 Windows10+ 系统中均支持配置深色和浅色两不的显示模式，前面提到的 prefers-color-scheme 正是可以感知系统的深浅模式配置，因此而产生相应的颜色变化。那么此时问题就出现了，如果选择了深色模式是不是就意味着，无法让站点站点显示出浅色效果呢？

原本的想法就是希望通过 prefers-color-scheme 参数来调整配色，但通过一番的资料调查后发现，该参数居然不支持手动进行调整。那么就只好就此放弃，还是选择通过 CSS 选择器的方式，再加上对媒体查询/切换进行监听，从而实现自动根据系统主题色调整网页颜色模式。

参考资源：

确认好方案接下来就是流程细节的优化，考虑到用户切换主题后还是跳转到不页面浏览，那么就是需要使用到本地存储，将用户的切换主题的选择记录下来，以保持较好的用户体验。大致的流程设计如下：

graph LR; node1([fa:fa-play 开始 ])-->node2{系统或站点是否配置深色模式}-->|是|node3[变量设置为dark]-->node4{读取本地存储主题是否为浅色}-->|是|node5[变量设置为light]-->node6[根据变量调整CSS选择器]-->node7[[更新本地主题选择存储]]-->node8([fa:fa-stop 结束 ]); node2-->|否|node4; node4-->|否|node9[变量设置为dark]-->node6;

然后就是调整 _colors.scss 的内容，增加 CSS 样式的选择器[data-theme="dark"]，因为这里做了总体的颜色配置管理，所以不需要去调整每个控件或样式在不同主题模式下的配色，部分代码参考如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

:root {
  --body-bg-color: #{$body-bg-color};
  --content-bg-color: #{$content-bg-color};
  --card-bg-color: #{$card-bg-color};
  ......
}

:root[data-theme="dark"] {
  --body-bg-color: #{$body-bg-color-dark};
  --content-bg-color: #{$content-bg-color-dark};
  --card-bg-color: #{$card-bg-color-dark};
  ......
}

最后就是通过 JS 脚本给 html 标签添加 data-theme="dark" 的元素配置来控制，便可实现自定义主题颜色的调整。整体的效果可以参考本站，点击右下角的主题切换按钮体验下效果，如有问题可以在留言区交流。 😄