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

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

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

MacOSWindows10+ 系统中均支持配置深色和浅色两不的显示模式,前面提到的 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" 的元素配置来控制,便可实现自定义主题颜色的调整。整体的效果可以参考本站,点击右下角的主题切换按钮体验下效果,如有问题可以在留言区交流。 😄