谁的博客还没有个黑夜模式呢？

在幽暗的环境里，如果主题太过明亮就会显得格外刺眼，会让眼睛非常难受。

要是万一伤害了我可爱的读者朋友的闪亮亮大眼睛怎么办？

我可是会心疼的哦~

下面讲一下具体的配置方法。

一、设置黑夜基础样式

  1. 首先在 .\themes\hexo-theme-matery\source\css\ 文件夹下新建一个 day-night.css；
  2. 然后粘贴以下代码并保存文件：
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
/* 字体颜色变灰白色 */
body.DarkMode .fas,
body.DarkMode .title,
body.DarkMode .row .text,
body.DarkMode article .article-content .summary,
body.DarkMode .card .card-image .card-title,
body.DarkMode .fa-moon-o:before,
body.DarkMode .fa-lightbulb-o:before,
body.DarkMode article .article-tags .chip,
body.DarkMode .chip-container .tag-title,
body.DarkMode div.jqcloud a,
body.DarkMode .friends-container .tag-title,
body.DarkMode .frind-ship .title h1,
body.DarkMode .card .card-content p,
body.DarkMode .card .card-content .dss,
body.DarkMode .v[data-class='v'] .vcount,
body.DarkMode .v[data-class='v'] .vcount .vnum,
body.DarkMode pre code,
body.DarkMode h1,
body.DarkMode h2,
body.DarkMode h3,
body.DarkMode h4,
body.DarkMode h5,
body.DarkMode h6,
body.DarkMode li,
body.DarkMode p,
body.DarkMode header .side-nav .mobile-head .logo-name,
body.DarkMode header .side-nav .mobile-head .logo-desc,
body.DarkMode header .side-nav .menu-list a,
body.DarkMode .bg-cover .post-title,
body.DarkMode.read .bg-cover .description,
body.DarkMode input,
body.DarkMode #contact .form-inline .form-group,
body.DarkMode #vcomments textarea {
    color: rgba(255, 255, 255, 0.6);
}

/* 背景颜色变灰色 */
body.DarkMode .card,
body.DarkMode .block-with-text:after {
    background-color: #282c34;
}

/* 背景颜色变黑色 */
body.DarkMode,
body.DarkMode .v[data-class='v'] .vcount,
body.DarkMode #rewardModal .modal-content,
body.DarkMode .modal,
body.DarkMode header .side-nav,
body.DarkMode header .side-nav .menu-list .m-nav-show {
    background-color: #12121c;
}

/* 改变透明度 */
body.DarkMode .aplayer {
    background: #2f3742 !important;
}

body.DarkMode img,
body.DarkMode strong {
    filter: brightness(0.7);
}

/*toc目录滤镜*/
body.DarkMode .toc-widget {
    filter: invert(0.8);
}

body.DarkMode .toc-widget .toc-list-item {
    color: #000
}

/* Skill bar text color */
body.DarkMode .skillbar .skill-bar-percent {
    color: #000;
}

/* 黑夜模式下 placeholder 颜色 */
body.DarkMode ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color : rgba(223, 223, 223, 0.3);
}
body.DarkMode :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color : rgba(223, 223, 223, 0.3);
}
body.DarkMode ::-moz-placeholder { /* Mozilla Firefox 19+ */

    color : rgba(223, 223, 223, 0.3);
}
body.DarkMode :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color : rgba(223, 223, 223, 0.3);
}
body.DarkMode ::-ms-input-placeholder { /* Microsoft Edge */
    color : rgba(223, 223, 223, 0.3);
}

  1. 然后打开主题目录下的 _config.yml 配置文件，在大约 480 行的位置找到 libs 中的 css，并添加一行代码如下：
1
2
3
libs:
  css:
    dayNight: /css/day-night.css # 这是要添加的那一行代码
  1. 接着在主题目录的 .\layout\_partial\ 文件夹里找到 head.ejs 文件，在 head 标签下的合适位置添加如下代码：
1
2
<!-- 黑夜模式样式 css -->
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- theme.libs.css.dayNight %>">

二、添加切换按钮

  1. 在主题目录的 \layout\_partial\ 文件夹里添加一个 day-night.ejs 文件，粘贴如下代码并保存：
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
<!-- 白天和黑夜主题 -->
<div class="sum-moon-box">
  <a class="btn-floating btn-large waves-effect waves-light" onclick="switchNightMode()" title="切换主题" >
    <i id="sum-moon-icon" class="fas fa-sun" style="width:48px; height:48px; font-size: 28px;"></i>
  </a>
</div>

<script>
  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'), $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon')) 
        : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')),
          
        setTimeout(function () {
          $('.Cuteen_DarkSky').fadeOut(1e3, function () {
            $(this).remove()
          })
        }, 2e3)
      })
  }

  //黑夜模式自动开启功能（首次加载）
  setTimeout(function () {
    if (localStorage.getItem('isDark') == null) {
      if ((new Date().getHours() >= 19 || new Date().getHours() < 7) && !$('body').hasClass('DarkMode')) {
        $('body').addClass('DarkMode');
        localStorage.setItem('isDark', '1');
        $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon');
      }
    } else {
      /* 模式判断 */
      if (localStorage.getItem('isDark') === '1') {
        document.body.classList.add('DarkMode');
        $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon');
      } else {
        document.body.classList.remove('DarkMode');
        $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon');
      }
    }
  }, 0);
</script>
  1. 在主题目录的 \layout\ 文件夹里找到 layout.ejs 文件，然后在 body 标签下添加如下代码：
1
<%- partial('_partial/day-night.ejs') %>
  1. 最后打开前面的 day-night.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
/* 黑夜模式动画 */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 8888;
}

.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: 9999;
    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);
}

/*黑夜模式按钮*/
.sum-moon-box {
    width: 48px;
    height: 48px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    right: 15px;
    bottom: 195px;
    margin-bottom: 0;
    z-index: 900;
}

.sum-moon-box .btn-floating {
    width: 48px;
    height: 48px;
}

.sum-moon-box i {
    font-size: 1.8rem;
    line-height: 48px !important;
}

到这里你的黑夜模式就已经设置完毕了，剩下的就是你自己的个性化优化了。

感谢大佬 Ruins 为我提供的教程，本篇教程是在其代码基础上优化的来。
并且修复了其部分BUG。

同时不建议大家设置那个黑夜的动态背景，本人实测那个东西会有个手机端的BUG，具体原因不太清楚。
具体表现为在友链等页面会出现页面一闪一闪的情况（只有手机端，电脑端调试也不会出问题）。
如果有清楚的大佬，还望赐教。
因为那个背景确实好看，很适合黑夜模式。

三、代码优化【2022.9.5】

之前代码中依靠 localStorage 来存储信息，从而帮助用户长时间维持黑夜模式。但是，这个 localStorage 的特点就是永久存储。意思就是如果用户不主动删除，这个变量将会一直存在。

那么，问题就来了，让我们假设一个场景：

①假设你的某个真爱用户在晚上访问了你的博客，你的网站判断了现在时晚上 20:30，于是自动开启了黑夜模式，你的用户很满意地浏览一阵后就离开了。
②第二天早上，该用户再次打开网站，结果网站居然还是黑夜模式…要知道现在都早上 9:00 了啊，还要用户手动切换！用户表示很麻烦！

对于一直秉承用户至上原则的我来说，这可不行，怎么能这么麻烦我的朋友呢？改，这个必须改！

所以，我最后修改了原代码，通过 cookie 来实现时间过长自动删除 isDark 变量，从而进入时间判断模式（通过当前时间来选择是否开启黑夜模式）。如果 cookie 中 isDark 变量还在，那就依照其记录值来选择黑夜模式，保持用户的选择。

代码中我设置的时间为 6 小时，你可以自己选择修改。

最后，源码附上：

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

<script>
  // 在这里修改 isDark 变量过期的时间
  var isDarkLiveHours = 6;

  function setCookie(name, value, hoursToLive) {
    var cookie = name + "=" + encodeURIComponent(value);
    
    if (typeof hoursToLive === "number") {
      cookie += ";path=/;max-age=" + (hoursToLive*60*60);
    }

    document.cookie = cookie;
  }

  function getCookie(name) {
    // 拆分 cookie 字符串
    var cookieArr = document.cookie.split(";");
   
    // 循环遍历数组元素
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
       
        /* 删除 cookie 名称开头的空白并将其与给定字符串进行比较 */
        if(name == cookiePair[0].trim()) {
            // 解码cookie值并返回
            return decodeURIComponent(cookiePair[1]);
        }
    }
    // 如果未找到，则返回null
    return null;
  }

  function switchNightMode() {
    $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')),
    setTimeout(function() {
      $('body').hasClass('DarkMode')
      ? (
        $('body').removeClass('DarkMode'),
        setCookie('isDark', 'false', isDarkLiveHours),
        $('#day-btn-icon-sun').css('display', 'none'),
        $('#night-btn-icon-moon').css('display', 'inherit')
      ) : (
        $('body').addClass('DarkMode'),
        setCookie('isDark', 'true', isDarkLiveHours),
        $('#day-btn-icon-sun').css('display', 'inherit'),
        $('#night-btn-icon-moon').css('display', 'none')
      ),

      setTimeout(function () {
        $('.Cuteen_DarkSky').fadeOut(1e3, function () {
          $(this).remove()
        })
      }, 2e3);
    });
  }

  //黑夜模式自动开启功能（首次加载）
  setTimeout(function () {
    if (getCookie('isDark') == null) {
      if ((new Date().getHours() >= 19 || new Date().getHours() < 7) && !$('body').hasClass('DarkMode')) {
        $('body').addClass('DarkMode');
        setCookie('isDark', 'true', isDarkLiveHours);
        $('#day-btn-icon-sun').css('display', 'inherit');
        $('#night-btn-icon-moon').css('display', 'none');
      }
    } else {
      if (getCookie('isDark') === 'true') {
        document.body.classList.add('DarkMode');
        $('#day-btn-icon-sun').css('display', 'inherit');
        $('#night-btn-icon-moon').css('display', 'none');
      } else {
        document.body.classList.remove('DarkMode');
        $('#day-btn-icon-sun').css('display', 'none');
        $('#night-btn-icon-moon').css('display', 'inherit');
      }
    }

  }, 0);
</script>