您好,深色模式,我的老朋友


黑夜给了我黑色的眼睛,不要让太亮的主题灼伤那幼小的心灵。
——糖·开发者·喵

咳咳…跑题了(x)

总而言之,这篇文章就是记录我给主题加入深色模式适配的一些心得体会什么的记录啦

由于搓CPU实在是搓得头都快掉下来了(即使是照着教程抄也感觉头发拼命掉的那种),所以偶尔也回来打理打理博客,拔拔草来调整一下心情。谁知,这草一拔就是年度大升级啊,做出的修改多到我甚至想先打一个发布版以防生产事故了。顺带着去dalao的博客偷代码(开发者的事能叫偷吗,那叫合理借鉴~),在苏卡卡dalao的博客发现了你好黑暗,我的老朋友 —— 为网站添加用户友好的深色模式支持这篇文章,于是就趁着功能调整与修复的时候给这只主题加入一个深色模式的功能吧~

但这个主题命途比较多舛,我是从狗狗Kratos-pjax将主题移植到Hexo上的,而这个主题又是由Vtrois开发的Kratos修改而来,因而文档格式和样式表等文件中凝结了三代人(?)的努力心血,却也有不少混杂和冗余的成分掺杂在其中还没好好整理过(主要是重构的成本太大了,修修补补没什么问题就好啦~)

所以本来是打算将原本样式表里所有的内容全部精细化处理一遍的,现在感觉还是利用CSS样式表的覆叠特性直接加上去,就当是一种折中的解决方案了吧。

主体思路还是很简单,寻找出定义图片和颜色的部分,将其修改掉就好啦;但实际处理起来的时候发现还是有相当多的细节问题。由于我并不是当成教程来写的,因此也就不过多展开,如果您也想给您的网站或是主题做深色模式适配的话,别忘了去揉揉苏卡卡毛茸茸的大尾巴哦~

  1. 通过审查元素,寻找页面中亮色主题的部分,将其修改为深色主题的配色;
  2. 将颜色部分的CSS整合到新的文件里,提取相同或是相似的颜色,可以使用同一CSS变量进行颜色赋予,以避免因多次书写导致的修改迁移问题;
  3. 处理好颜色之间的配色关系,调整图像与颜色的平衡等等;
  4. 加入手动切换开关(可以去戳右下角的新开关试试哦)

由于相关的代码实在是太长了,所以就不多贴出来啦,可以直接去翻翻主题文件哦w

那么祝大家也能打造出自己喜欢的完美博客啦w