Hexo_Next8.x主题添加深色模式

发表于 分类于

Next 8.x 自动添加可切换的暗黑模式

安装 Hexo 插件

安装 hexo-next-darkmode 插件

1
npm install hexo-next-darkmode --save

配置 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'
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

关闭原生的暗黑模式

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

1
darkmode: false

暗黑模式 CSS 样式自定义

暗黑模式激活后，hexo-next-darkmode 插件会将 darkmode–activated CSS 类添加到 body 标签，可以利用它覆盖插件默认自带的 CSS 样式（如下所示）；这样就可以实现暗黑模式 CSS 样式的高度自定义，包括代码块颜色自定义切换等。更多配置内容介绍可以参考官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.darkmode--activated {
  --body-bg-color: #282828;
  --content-bg-color: #333;
  --card-bg-color: #555;
  --text-color: #ccc;
  --blockquote-color: #bbb;
  --link-color: #ccc;
  --link-hover-color: #eee;
  --brand-color: #ddd;
  --brand-hover-color: #ddd;
  --table-row-odd-bg-color: #282828;
  --table-row-hover-bg-color: #363636;
  --menu-item-bg-color: #555;
  --btn-default-bg: #222;
  --btn-default-color: #ccc;
  --btn-default-border-color: #555;
  --btn-default-hover-bg: #666;
  --btn-default-hover-color: #ccc;
  --btn-default-hover-border-color: #666;
  --highlight-background: #282b2e;
  --highlight-foreground: #a9b7c6;
  --highlight-gutter-background: #34393d;
  --highlight-gutter-foreground: #9ca9b6;
}

.darkmode--activated img {
  opacity: 0.75;
}

.darkmode--activated img:hover {
  opacity: 0.9;
}

.darkmode--activated code {
  color: #69dbdc;
  background: transparent;
}

设置访问时默认为深色

在./node_modules/hexo-next-darkmode 目录下找到 darkmode.njk 文件
修改内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="{%if config.darkmode_js.libUrl %}{{ config.darkmode_js.libUrl }}{%else%}https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js{%endif%}"></script>

<script>
var options = {
  bottom: '{{ config.darkmode_js.bottom }}',
  right: '{{ config.darkmode_js.right }}',
  left: '{{ config.darkmode_js.left }}',
  time: '{{ config.darkmode_js.time }}',
  mixColor: '{{ config.darkmode_js.mixColor }}',
  backgroundColor: '{{ config.darkmode_js.backgroundColor }}',
  buttonColorDark: '{{ config.darkmode_js.buttonColorDark }}',
  buttonColorLight: '{{ config.darkmode_js.buttonColorLight }}',
  saveInCookies: {{ config.darkmode_js.saveInCookies }},
  label: '{{ config.darkmode_js.label }}',
  autoMatchOsTheme: {{ config.darkmode_js.autoMatchOsTheme }}
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
//新增的内容,如果不是深色模式,则激活深色模式
if(!darkmode.isActivated())
{
  darkmode.toggle();
}
</script>

重新构建生成静态文件

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

1
hexo c & hexo g & hexo d