雪泥鴻爪

dog2's blog

Hexo（Next主题）实现可切换的Dark Mode(暗色背景/夜间模式)

Posted on In Disqus:
Symbols count in article: 1.5k Reading time ≈ 1 mins.
  • Title(EN): Hexo Dark Mode Note
  • Author: dog2

Dark Mode —— 中老年程序🐶的眼睛续命必备功能

Mac、Win 纷纷推出了 Dark Mode，安卓也原生支持了随着夜幕降临自动调整屏幕亮度（蓝光）的功能，看来保护眼睛、关爱程序猿是大势所趋。

这里，我们尝试了3种使Hexo Next主题切换为darkmode的方式。

方案1：官方最新版Next

Next在最近的几个版本的更新中加入了对darkmode的原生支持，配置非常简单。

  • 配置方法：参见 官方文档和大佬们的文章
  • 优点：配置非常简单
  • 缺点：
    • 根据自己的测试，Safari和Firefox 没有问题，但是Chrome无效
    • 不能进行切换，而是根据系统偏好（是否是夜间模式）来判断 是否启用

方案2：hexo-next-nightmode插件

  • 配置方法：请参见官方说明
  • 优点：可以切换，配置相对简单
  • 缺点：
    • 需要额外安装插件
    • 开启后会在侧边栏的个人信息一览(Overview)里添加切换黑白背景的按钮，但是 当前版本没有默认使用暗色背景的选项
    • 默认切换按钮在Overview里，可能会有如下弊端
      • 如果设置为默认隐藏侧边栏，则用户首次访问首页时，不知道有夜间模式
      • 在文章页面时，侧边栏是有两个标签组成，默认显示文章大纲。因此只有切换至Overview后才能后点击背景切换按钮
    • bug：darkmode下，header位置被选中的category背景色变成了蓝色

方案3：引入js库 darkmode.js

缘由（非重点可略过）

从Next加入了对darkmode的原生支持的PR页面的讨论可以看到，在某大佬X向Next官方贡献了原生darkmode的代码后，某网友向其呼吁加一步加上切换按钮。

但大佬X似乎不打算加，并表示该网友可以使用js库 darkmode.js 去实现。

没想到网友其实是大佬Y，果然在自己的博客成功集成了darkmode.js。

于是另一位网友向大佬Y询问如何集成的具体细节，但是没有得到回应。

既然可行，那就不妨尝试一下，我也按照darkmode.js官方的说明操作一番，其中也遇到了些小问题：

  • 切换按钮无法点击
  • 切换到夜间模式后，所有图片的颜色也被翻转，这不是我们所期望的

为解决这些问题，参考了官方相关issue，并且抄了大佬Y的作业。

为Next订制darkmode.js

可以参考这里我fork的next对比具体做了哪些配置和修改：dog-2/hexo-theme-next

最终效果图见文章最后，下面是具体步骤：

1. 将darkmode.js添加为Next的submodule

.gitignore 最后添加 

1
!source/lib/darkmode-js

进入 {blog_dir}/themes/next/，执行如下命令 

1
git submodule add https://github.com/sandoche/Darkmode.js.git source/lib/darkmode-js/

2. 根据偏好修改配置文件

根据偏好修改下列配置文件中的其它选项

  • {blog_dir}/themes/next/languages/en.yml
  • next配置文件中的配置

这里需要注意的是next有两种配置文件的形式，请确认自己是哪一种。 新Next的配置文件，有2种设置方式，请参考官方文档：

  • 官方中文
  • 官方英文

3. 定制vendors加入darkmode.js

  1. 修改 {blog_dir}/themes/next/layout/_scripts/vendors.swig
  2. 修改next配置文件中的针对darkmode以及darkmode-js的配置：
    • 确保next原有darkmode选项设置为 false
    • 添加darkmode-js开关
    • 添加darkmode-js自定义CDN选项（可选）

最终效果