NexT主题添加深色模式（DarkMode）

发表于 分类于 本文字数： 5.9k 阅读时长 ≈ 5 分钟
置顶 |
文章摘要
新版NexT主题自带了深色模式，但缺乏控制按钮，即使将主题配置文件的darkmode设置为true，不管是白天还是晚上，深色模式好像也没起作用。现如今的手机浏览器自带深色模式，比如Via浏览器，效果特别好，因此，深色模式在博客页面中可添加可不添加。如果你想在博客页面添加深色模式，可以用插件实现，也可以用简易代码实现。

💾插件版

操作方法

1 ()、 ()下 (xià)载 (zài)插 (chā)件 (jiàn)

1
npm install hexo-next-darkmode --save

2 ()、 ()修 (xiū)改 (gǎi)配 (pèi)置 (zhì)

在配置文件里添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 深色模式
# 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: '32px' # default: '32px'
  left: 'unset' # 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: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js
重要

注意： 深色按钮，默认是显示在右下角。如果想让按钮显示在左下角，将right后面的32px设置为unset，将left后面的unset设置为32px即可。

至此，你的博客页面已实现了带切换按钮的深色模式，可以直接使用了。🎉如果想让该在点击后出现日转夜动画效果，还需要继续添加额外的js和css文件。🌝

添加日转夜动画效果

1、新建js文件

在文件夹中新建一个文件，然后添加下面的代码：

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
function switchNightMode() {
  // 检查是否已经存在这些元素，避免重复插入
  if (!document.getElementById('sun') || !document.getElementById('moon')) {
    document.querySelector('body').insertAdjacentHTML('beforeend', 
      '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"><div id="sun"></div><div id="moon"></div></div></div>'
    );
  }

  setTimeout(function() {
    if (document.querySelector('body').classList.contains('darkmode--activated')) {
      document.querySelector('body').classList.add('DarkMode');
    } else {
      document.querySelector('body').classList.remove('DarkMode');
    }

    setTimeout(function() {
      const darkSky = document.getElementsByClassName('Cuteen_DarkSky')[0];
      darkSky.style.transition = 'opacity 3s';
      darkSky.style.opacity = '0';
      
      setTimeout(function() {
        darkSky.remove();
      }, 1000);
    }, 2000);
  }, 0);

  var isWhite = document.querySelector('.darkmode-toggle.darkmode-toggle--white');

  // 保持元素透明度的状态，避免重置
  const sun = document.getElementById("sun");
  const moon = document.getElementById("moon");

  if (isWhite) {
    sun.style.opacity = "1";
    moon.style.opacity = "0";
    setTimeout(function () {
      sun.style.opacity = "0";
      moon.style.opacity = "1";
    }, 1000);
    console.log("light");
  } else {
    sun.style.opacity = "0";
    moon.style.opacity = "1";
    setTimeout(function () {
      sun.style.opacity = "1";
      moon.style.opacity = "0";
    }, 1000);
    console.log("dark");
  }
}

if (document.querySelector('body').classList.contains('darkmode--activated')) {
  document.querySelector('body').classList.add('DarkMode');
}

var Button = document.querySelector('.darkmode-toggle');

if (Button) {
  Button.addEventListener('click', function() {
    switchNightMode();
  });
}

2、添加css代码：

在文件中添加以下代码：

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* 深色模式（Dark Mode）日转夜动画 */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 88888888;
}

.Cuteen_DarkSky {
  background: linear-gradient(to top, #f8cd71 0, #5bfde9 80%);
}

.Cuteen_DarkSky:before {
  transition: 2s ease all;
  opacity: 0;
  background: linear-gradient(to top, #30cfd0 0, #330867 100%);
}

.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);
} */

.Cuteen_DarkPlanet #sun {
  position: absolute;
  border-radius: 100%;
  left: 44%;
  top: 30%;
  height: 6rem;
  width: 6rem;
  background: #ffee94;
  box-shadow: 0 0 40px #ffee94;
}

.Cuteen_DarkPlanet #moon {
  position: absolute;
  border-radius: 100%;
  left: 44%;
  top: 30%;
  height: 6rem;
  width: 6rem;
  box-shadow: -1.8em 1.8em 0 0.2em #fff;
}



.search span {
  display: none;
}

.menus_item a {
  text-decoration: none !important;
}

/* 按钮相关，对侧栏按钮做过魔改的可以调整这里的数值 */
.icon-V {
  padding: 5px;
}

3、引入代码

在文件的底部添加下面的代码：

1
2
{# 日转夜模式切换动画 #}
<script defer data-pjax src="/js/sun_moon.js"></script>
📔代码版

如果你只想要一个单一的深色模式，不想安装插件，也不需要日转夜动画效果，可以直接在文件里添加下面的代码：

1
2
3
4
5
6
7
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
	new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

代码添加位置

警告

如果你的博客添加了透明度，可能会有影响；如果你的博客站点添加了背景图片，深色模式可能对背景图片不起作用，即使用浏览器自带的深色模式也一样。😲

-------------本文已到底啦 感谢您的阅读-------------