Next 8.x 暗黑模式

---

Next8.x 自带暗黑模式,但是不能手动切换,所以自己加了一个可以做切换的

首先, 在git下载 darkmode-js.min.js, 放在source/js中

在darkmode-js.min.js的末尾添加动画效果的函数

function changeColor() {
  document.querySelector('#wobblew').style.display = 'none';
  document.querySelector('.darkmode-layer').style.background = '#d7d7d7';
  document.querySelector('.darkmode-background').style.background = '#fff';
  setTimeout(() => {
    document.querySelector('.darkmode-layer').style.background = 'transparent';
    document.querySelector('.darkmode-background').style.background = 'transparent';
    document.querySelector('#wobblew').style.display = 'block';
  }, 150);
}

在 key 为 showWidget 中 调用上面的函数

{
  key: 'showWidget',
  value: function () {
    var e = this;
    if (r) {
      var t = this.button,
        n = this.layer,
        o = 1e3 * parseFloat(this.time);
      t.classList.add('darkmode-toggle'),
        t.classList.remove('darkmode-toggle--inactive'),
        t.setAttribute('aria-label', 'Activate dark mode'),
        t.setAttribute('aria-checked', 'false'),
        t.setAttribute('role', 'checkbox'),
        n.classList.add('darkmode-layer--button'),
        t.addEventListener('click', function () {
          var r = e.isActivated();
          r
            ? (n.classList.remove('darkmode-layer--simple'),
              t.setAttribute('disabled', !0),
              setTimeout(function () {
                n.classList.remove('darkmode-layer--no-transition'),
                  n.classList.remove('darkmode-layer--expanded'),
                  t.removeAttribute('disabled');
              }, 1))
            : (n.classList.add('darkmode-layer--expanded'),
              t.setAttribute('disabled', !0),
              setTimeout(function () {
                n.classList.add('darkmode-layer--no-transition'),
                  n.classList.add('darkmode-layer--simple'),
                  t.removeAttribute('disabled');
              }, o)),
            t.classList.toggle('darkmode-toggle--white'),
            document.body.classList.toggle('darkmode--activated'),
            changeColor(), <=============放在这里
            window.localStorage.setItem('darkmode', !r);
        });
    }
  }
},

最后在source/_data/body-end.njk中把 js 引入,并配置

<script src="/js/darkmode-js.min.js"></script>

<script>
var options = {
  bottom: '32px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: 'transparent', // default: '#fff', transparent
  backgroundColor: 'transparent',  // default: '#fff', transparent
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: true, // default: true,
  label: '🌓', // default: '' 🌓
  autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>

如果_data下没有body-end.njk,需要新增一个,并且在 _config.yml 中开启

custom_file_path:
  bodyEnd: source/_data/body-end.njk

以上，就可以实现了，在我的博客里就可以看到效果，如有错误，欢迎大佬指出