butterfly主题实现白天夜晚切换动画

第一步

将如下代码添入theme/butterfly/_config.yml里inject的head中如图所示

- <svg aria-hidden="true" style="position:absolute; overflow:hidden; width:0; height:0"><symbol id="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><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><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><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"></path></symbol><symbol id="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><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"></path></symbol></svg><a onclick="switchNightMode()" class="icon-V hidden" title="切换日间/夜间模式"><svg width="48" height="48" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a>

第二步

在theme/butterfly/source/js下新建文件sun_moon.js 并添加theme/butterfly/_config.yml里inject的bottom里，如图所示

将如下代码填入sun_moon.js中

function checkNightMode() {
   '1' === localStorage.getItem('isDark') ? ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun')) : '0' === localStorage.getItem('isDark') ? $('#modeicon').attr('xlink:href', '#icon-moon') : new Date().getHours() >= 20 || new Date().getHours() < 7 ? ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun')) : matchMedia('(prefers-color-scheme: dark)').matches ? ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun')) : $('#modeicon').attr('xlink:href', '#icon-moon')
 }
 function switchNightMode() {
   $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')),
     setTimeout(function () {
       $('body').hasClass('DarkMode') ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#changeMode-top').removeClass('fa-sun').addClass('fa-moon'), $('#modeicon').attr('xlink:href', '#icon-moon')) : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun')),
         setTimeout(function () {
           $('.Cuteen_DarkSky').fadeOut(1e3, function () {
             $(this).remove()
           })
         }, 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)
       $('#modeicon').attr('xlink:href', '#icon-moon')
     } else {
       activateLightMode()
       saveToLocal.set('theme', 'light', 2)
       GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
       $('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun')
     }
     // handle some cases
     typeof utterancesTheme === 'function' && utterancesTheme()
     typeof FB === 'object' && window.loadFBComment()
     window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
 }
 function switchNightModeTop() {
   $('body').hasClass('DarkMode') ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#changeMode-top').removeClass('fa-sun').addClass('fa-moon'), $('#modeicon').attr('xlink:href', '#icon-moon')) : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun'))
 }

最后一步

在theme/butterfly/source/css下新建文件test.css 并添加theme/butterfly/_config.yml里inject的head里，如图所示

将如下代码贴入test.css中

.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);
}
.Cuteen_DarkSky: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 {
    
    border-radius: 6px !important;
    width: 18px;
    height: 18px;
   
    border-radius: 6px;
    overflow: hidden;
    position: relative;
 
    top: 2rem;
    left: 8rem;
    transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
    z-index: 9999;
  }
 
.icon-V svg{ 
    width: 22px;
    height: 22px;
    position: absolute;
    bottom: 0px;
    margin: auto;
    right: 1px;
  }

效果展示

快去试试吧，有问题请在下方评论留言哦。