Hexo8.x主题添加可切换的黑暗模式

发表于 分类于 阅读次数： Waline： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

切换黑暗或白天模式

效果如下：

  1. 在博客目录下安装hexo-next-darkmode插件

    1
    npm install hexo-next-darkmode --save

  2. 配置hexo插件

    在Next主题的_config.yml文件最后面添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # 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: true # default false
      saveInCookies: false # default: true
      label: '🌓' # default: ''
      autoMatchOsTheme: false # default: true
      libUrl: # Set custom library cdn url for Darkmode.js

    同时需要把_config.yml中的pjax打开，并且关闭原生的暗黑模式

    1
    2
    3
    pjax: true

    darkmode: false

  3. 最后重新构建生成静态文件即可

    1
    2
    3
    hexo clean
    hexo g
    hexo d