20230408更新.更换博客主题,本文教程无变化.

最近总在晚上写一些东西,突然想起来博客还没有黑暗模式.我的博客用的是vexo主题,去翻了一下vexo的github:https://github.com/yanm1ng/hexo-theme-vexo ...... 本文主要为hexo vexo主题添加一个可以切换的黑色/夜间模式。本文介绍如何实现按钮来切换，包括如何在代码部分也切换夜间模式。

安装

跟据darkmode.js 官网的描述,在网页的head引入

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> 
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

ps:由于国内使用jsdelivr并不稳定,我将博客的所有文件都放在了github,并通过netlify加速.

效果

你可能会发现到上面那步,效果和我的并不一样,字体仍然是黑色或者标签的边框和文章代码框是白色. 这时候就需要对颜色微调.

优化

前言

在darkmode.js被激活的时候，会在body上添加一个.darkmode--activated的类，如果我们把上面没有暗黑化的样式添加到css里[^1]，就可以实现自己需要的效果. 我使用的主题是vexo,部分文件结构如下所示

├── _config.styl
├── _partial
│   ├── about.styl
│   ├── archive.styl
│   ├── catalog.styl
│   ├── footer.styl
│   ├── header.styl
│   ├── markdown.styl
│   ├── pager.styl
│   ├── project.styl
│   └── tags.styl
├── layout.ejs
└── style.styl

我这里仅使用了通过修改css来改变前端样式,仅供参考.

修改style.styl

这是我的优化,把tag和header的背景透明化.具体原理就是当添加暗黑的类属性后我的这些设置会覆盖原来设置的color/background等属性,就可以做到调整暗黑模式的颜色,当关闭暗黑模式时,仅这些颜色属性取消,就可以恢复正常的样子. 当然也可以有额外的设置,比如增大加粗暗黑模式的字体,修改暗黑模式的页面属性等.

[^1]: hexo博客next主题添加夜间模式（Dark Mode）