Next 8.x 自动添加可切换的暗黑模式
安装 Hexo 插件
安装 hexo-next-darkmode 插件
1
| npm install hexo-next-darkmode
|
配置 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 配置文件中更改以下内容:
暗黑模式 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
|