Jay's Blog
0%

Next主题添加切换暗黑模式

Posted on Edited on In , Views:
Symbols count in article: 1.2k Reading time ≈ 1 mins.

安装 hexo-next-darkmode 插件[1]

windows管理员打开powershell，运行一下命令：

1
$ npm install hexo-next-darkmode --save --registry=http://registry.npm.taobao.org

配置 Hexo 插件

在 Next 主题的 _config.yml 配置文档里添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js
  • isActivated: true：默认激活暗黑 / 夜间模式，请始终与 saveInCookies: false、autoMatchOsTheme: false 一起使用；同时需要在 NexT 主题的 _config.yml 配置文档里设置 pjax: true，即启用 Pjax。

关闭原生的暗黑模式

确保 Next 原生的 darkmode 选项设置为 false，在 Next 的 _config.yml 配置文档中更改以下内容：

1
darkmode: false

Hexo 重新构建生成静态资源文档后，点击页面上的按钮即可切换暗黑模式：

1
2
$ hexo clean
$ hexo g -d

参考文章

+