效果配置

  1. 动画 SVG 文件路径{HexoRoot}/themes/butterfly/layout/includes/sun_moon.pug
1
2
3
4
5
6
7
8
9
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')
  1. 样式 Stylus 文件路径{HexoRoot}/themes/butterfly/source/css/_layout/sun_moon.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.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
  1. JavaScript 文件路径{HexoRoot}/themes/butterfly/source/js/sun_moon.js
  • Butterfly 5.2.2 版本使用其他博主提供 js 未能正常执行切换：

差异代码：

1
2
3
4
5
6
7
8
9
10
11
12
if (willChangeMode === "dark") {
  btf.activateDarkMode();
  btf.saveToLocal.set("theme", willChangeMode, 2);
  // Snackbar 提示
  // GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
  document.getElementById("modeicon").setAttribute("xlink:href", "#icon-sun");
} else if (willChangeMode === "light") {
  btf.activateLightMode();
  btf.saveToLocal.set("theme", willChangeMode, 2);
  document.querySelector("body").classList.add("DarkMode");
  document.getElementById("modeicon").setAttribute("xlink:href", "#icon-moon");
}

调整后的完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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 willChangeMode =
    document.documentElement.getAttribute("data-theme") === "dark"
      ? "light"
      : "dark";

  if (willChangeMode === "dark") {
    btf.activateDarkMode();
    btf.saveToLocal.set("theme", willChangeMode, 2);
    // Snackbar 提示
    // GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    document.getElementById("modeicon").setAttribute("xlink:href", "#icon-sun");
  } else if (willChangeMode === "light") {
    btf.activateLightMode();
    btf.saveToLocal.set("theme", willChangeMode, 2);
    document.querySelector("body").classList.add("DarkMode");
    document
      .getElementById("modeicon")
      .setAttribute("xlink:href", "#icon-moon");
  }
  // 其他场景处理（评论组件等）
  if (typeof utterancesTheme === "function") utterancesTheme();
  if (typeof FB === "object") window.loadFBComment();
  if (
    window.DISQUS &&
    document.getElementById("disqus_thread").children.length
  ) {
    setTimeout(() => window.disqusReset(), 200);
  }
}
  1. 引入切换动画{HexoRoot}themes/butterfly/layout/includes/head.pug
  • 文件最后一行增加
1
include ./sun_moon.pug
  1. 替换 Butterfly 默认的切换按钮{HexoRoot}/themes/butterfly/layout/includes/rightside.pug
  • 注释 2 行，新增 3 行
1
2
3
4
5
6
7
when 'darkmode'
  if darkmode.enable && 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')
  1. 引入 JavaScript{HexoRoot}_config.butterfly.yml
1
2
3
4
inject:
  head:
  bottom:
    - <script src="/js/sun_moon.js" async></script>

暗黑模式配置背景图片

文件路径{HexoRoot}/themes/butterfly/source/css/_mode/darkmode.styl

  • 大约在 43 行
  • 背景图片可使用 url、本地相对路径
1
2
3
4
5
6
7
8
9
10
11
#web_bg:before
  position: absolute
  width: 100%
  height: 100%
  background-color: alpha($dark-black, .7)
  content: ''

  background-image: url(https://upyun.sysio.cn/img/background/wallhaven-j3m71y_1920x1080.png)
  background-size: 100% 100%
  background-size: cover
  background-repeat: no-repeat center