【Hexo博客】添加Butterfly主题昼夜模式转换动画

1. 新建sun_moon.pug

新建[Blogroot]\themes\butterfly\layout\includes\sun_moon.pug,这部分其实实质上就是一个svg文件，通过js操作它的旋转显隐，淡入淡出实现动画效果。

svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')
  symbol#icon-sun(viewBox='0 0 1024 1024')
    path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')
    path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id='8421')
    path(d='M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z', fill='#4D5152', p-id='8422')
    path(d='M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z', fill='#4D5152', p-id='8423')
  symbol#icon-moon(viewBox='0 0 1024 1024')
    path(d='M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z', fill='#FFB531', p-id='11345')
    path(d='M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z', fill='#030835', p-id='11346')

2. 新建sun_moon.styl

新建[Blogroot]\themes\butterfly\source\css\_layout\sun_moon.styl

.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(#feb8b0, #fef9db)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(#4c3f6d, #6c62bb, #93b1ed)

.DarkMode
  .Cuteen_DarkSky
    &:before
      opacity 1

.Cuteen_DarkPlanet
  z-index 99999999
  position fixed
  left -50%
  top -50%
  width 200%
  height 200%
  -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  transform-origin center bottom


@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet
  &:after
    position absolute
    left 35%
    top 40%
    width 9.375rem
    height 9.375rem
    border-radius 50%
    content ''
    background linear-gradient(#fefefe, #fffbe8)

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
.icon-V
  padding 5px

3. 新建sun_moon.js

新建[Blogroot]\themes\butterfly\source\js\sun_moon.js

function switchNightMode() {
  document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'),
    setTimeout(function() {
      document.querySelector('body').classList.contains('DarkMode') ? (document.querySelector('body').classList.remove('DarkMode'), localStorage.setItem('isDark', '0'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')) : (document.querySelector('body').classList.add('DarkMode'), localStorage.setItem('isDark', '1'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')),
        setTimeout(function() {
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
          setTimeout(function() {
            document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
          }, 1e3);
        }, 2e3)
    })
  const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
  if (nowMode === 'light') {
    activateDarkMode()
    saveToLocal.set('theme', 'dark', 2)
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')
  } else {
    activateLightMode()
    saveToLocal.set('theme', 'light', 2)
    document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
  }
  // handle some cases
  typeof utterancesTheme === 'function' && utterancesTheme()
  typeof FB === 'object' && window.loadFBComment()
  window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}

4. 修改head.pug

修改[Blogroot]\themes\butterfly\layout\includes\head.pug，在文件末位加上一行，用来引入我们刚刚创建的文件：

//- 昼夜模式切换动画
include ./sun_moon.pug

5. 修改rightside.pug

修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug，把原本的昼夜切换按钮替换掉（大概在14、15行）：

红色-是要删除的代码
绿色+是要添加的代码

  when 'translate'
    if translate.enable
      button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
  when 'darkmode'
    if theme.darkmode.enable && theme.darkmode.button
-     button#darkmode(type="button" title=_p('rightside.night_mode_title'))
-       i.fas.fa-adjust
+     a.icon-V.hidden(onclick='switchNightMode()',  title=_p('rightside.night_mode_title'))
+       svg(width='25', height='25', viewBox='0 0 1024 1024')
+         use#modeicon(xlink:href='#icon-moon')

6. 修改_config.yml

修改[Blogroot]\_config.butterfly.yml，找到相应位置引入一下js。

有些版本的主题配置文件是[Blogroot]\themes\butterfly\_config.yml

inject:
  head:
  bottom:
    - <script src="/js/sun_moon.js" async></script>

最后执行 Hexo 命令三连，hexo clean、hexo g、hexo s，即可看到效果

【补充】修改rightmenu.js

如果没有魔改过昼夜切换按钮，此步骤请忽略

现在点击页面侧边昼夜切换按钮时有动画效果，

但是如果你看过我之前的文章，并且跟着我魔改过鼠标右键菜单（魔改美化 Butterfly 主题右键菜单），且右键菜单里也有昼夜切换按钮，那么需要修改右键菜单对应的JS文件来执行咱的动画，否则没有效果。

打开 /themes/butterfly/source/js/rightmenu.js 文件，

注释掉相应位置原来的代码，并添加一行动画切换的执行函数：

// 昼夜切换
rmf.switchDarkMode = function(){
    // const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    // if (nowMode === 'light') {
    //     activateDarkMode()
    //     saveToLocal.set('theme', 'dark', 2)
    //     GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    // } else {
    //     activateLightMode()
    //     saveToLocal.set('theme', 'light', 2)
    //     GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    // }
    // // handle some cases
    // typeof utterancesTheme === 'function' && utterancesTheme()
    // typeof FB === 'object' && window.loadFBComment()
    // window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)

    // 昼夜切换动画
    switchNightMode()
};

如果页面中其他地方还有你自己魔改过的昼夜切换按钮，也需要把相应JS代码替换成switchNightMode()函数。

【补充】修改暗夜模式网页背景

如果想让网站暗夜模式下切换成别的图片，使得视觉体验更加舒适，

可以打开/themes/butterfly/source/css/_mode/darkmode.styl

在大约第49行添加上如下代码，图片需要自己替换。

#web_bg
  background-image: url(/img/images/wallpaper-dark.jpg)
  background-size: 100% 100%
  background-size: cover
  background-repeat: no-repeat center

---

参考内容：

• 添加白天夜间模式转换动画