Next 主题添加可切换的暗黑模式_nextjs 切换主题色

本文首发于 Clay 的技术博客

前言

Next 8.x 原生的暗黑模式

Next 8.x 主题已经原生支持暗黑模式，只需要在 Next 的 _config.yml 配置文件中，将相应的开关打开即可（如下所示）：

darkmode: true
1

Next 8.x 主题原生暗黑模式的优缺点：

• 优点：
  • 配置非常简单
• 缺点：
  • 缺少切换按钮，默认是根据系统偏好（系统是否处于暗黑模式）来决定是否启用

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

hexo-next-darkmode 插件支持自动添加可切换的暗黑模式，同时支持暗黑模式下的 CSS 样式高度自定义，兼容 Next 7.x 与 8.x 版本。

安装 Hexo 插件

安装 hexo-next-darkmode 插件

$ npm install hexo-next-darkmode --save
1

配置 Hexo 插件

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

# 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: '
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/121477