Matery 主题自定义(一)黑夜模式

黑夜模式

作为一个前端学习者，自然懂得黑夜模式的重要性，可惜主题原生未提供，那就自己弄吧

个人博客作为效果参考：https://dreamruins.gitee.io/

设置基础样式

参考其他优秀产品的黑夜模式，得出共性：

  • 那就是黑夜模式的背景一般不会是纯黑（#000）；而是淡黑色，字体也不是纯白（#fff）而浅白色
  • 图片亮度降低

下面就开始贴代码了

在 themes>hexo-theme-matery>source>css>matery.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
103
/* 字体颜色变灰白色 */
#dark-mode .fas,
#dark-mode .title,
#dark-mode .row .text,
#dark-mode article .article-content .summary,
#dark-mode .card .card-image .card-title,
#dark-mode .fa-moon-o:before,
#dark-mode .fa-lightbulb-o:before,
#dark-mode article .article-tags .chip,
#dark-mode .chip-container .tag-title,
#dark-mode div.jqcloud a,
#dark-mode .friends-container .tag-title,
#dark-mode .frind-ship .title h1,
#dark-mode .card .card-content p,
#dark-mode .card .card-content .dss,
#dark-mode .v[data-class="v"] .vcount,
#dark-mode .v[data-class="v"] .vcount .vnum,
#dark-mode pre code,
#dark-mode h1,
#dark-mode h2,
#dark-mode h3,
#dark-mode h4,
#dark-mode h5,
#dark-mode h6,
#dark-mode li,
#dark-mode p,
#dark-mode header .side-nav .mobile-head .logo-name,
#dark-mode header .side-nav .mobile-head .logo-desc,
#dark-mode header .side-nav .menu-list a,
#dark-mode .bg-cover .post-title,
#dark-mode .search-input,
#dark-mode.read .bg-cover .description {
  color: rgba(255, 255, 255, 0.6);
}

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

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

/* 改变透明度 */
#dark-mode .aplayer {
  background: #2f3742 !important;
}

#dark-mode img,
#dark-mode strong {
  filter: brightness(0.7);
}

/* 统计图滤镜 */
#dark-mode #post-calendar,
#dark-mode #category-radar,
#dark-mode #tags-chart,
#dark-mode #categories-chart,
#dark-mode #posts-chart {
  filter: invert(1);
}

/*toc目录滤镜*/
#dark-mode .toc-widget {
  filter: invert(0.8);
}

#dark-mode .toc-widget .toc-list-item {
  color: #000;
}

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

#dark-mode table,
#dark-mode table tr,
#dark-mode table th,
#dark-mode table td {
    border: none;
}

#dark-mode table th {
    background: #282c34;
}

#dark-mode table tr {
    background: #606266;
    color: rgb(243, 244, 246);
}

#dark-mode table tbody tr:nth-child(odd) td {
    background: #282c34;
}

切换按钮

完成了背景、字体、图片的样式，就需要黑夜白天切换按钮了

在 themes>hexo-theme-matery>layout>_widget 中创建一个新的文件 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

<!-- 白天和黑夜主题 -->
<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() {
    sessionStorage.setItem('changeTheme', true)
    $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')),
      setTimeout(function () {
        $('#dark-mode').length > 0
        ? (document.body.removeAttribute('id'), localStorage.setItem('isDark', '0'), $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon'))
        : (document.body.setAttribute('id', 'dark-mode'), localStorage.setItem('isDark', '1'), $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')),

        setTimeout(function () {
          $('.Cuteen_DarkSky').fadeOut(1e3, function () {
            $(this).remove()
          })
        }, 2e3)
      })
  }
</script>

再在 themes>hexo-theme-matery>layout>layout.ejs 文件中引用一下

需要在 body 标签内部插入下面代码

1
<%- partial('_widget/day-night.ejs') %>

按钮样式

完成上面操作以后，就需要添加按钮样式和切换动画了，同样是在 themes>hexo-theme-matery>source>css>matery.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
/* 黑夜模式动画 */
@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

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

#dark-mode .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;
}

.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;
}

定时提示切换黑夜模式

如果浏览时间在晚上 7 点到晚上 8 之间，会提示用户切换到黑夜模式

在 themes>hexo-theme-matery>source>js>matery.js 中添加下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
//黑夜模式提醒开启功能
setTimeout(function () {
  if (
    new Date().getHours() >= 19 &&
    new Date().getHours() < 20 &&
    !$("#dark-mode").length > 0
  ) {
    let toastHTML =
      '<span style="color:#97b8b2;border-radius: 10px;>' +
      '<i class="fa fa-bell" aria-hidden="true"></i>晚上使用黑夜模式阅读能够减轻视觉疲劳</span>';
    M.toast({ html: toastHTML });
  }
}, 2000);

自动切换黑夜模式

如果浏览时间在晚上 8 点到早上 7 之间，会自动切换到黑夜模式

在 themes>hexo-theme-matery>layout>layout.ejs 中添加下列代码（最好插入在 <%- partial('_partial/day-night.ejs') %> 下面）

1
2
3
4
5
6
7
8
9
10
//黑夜模式提醒开启功能
if (!sessionStorage.getItem("changeTheme")) {
  if (
    (new Date().getHours() >= 20 || new Date().getHours() < 7) &&
    !$("#dark-mode").length > 0
  ) {
    document.body.setAttribute("id", "dark-mode");
    $("#sum-moon-icon").addClass("fa-sun").removeClass("fa-moon");
  }
}

黑夜模式持久化

在 themes>hexo-theme-matery>layout>layout.ejs 中添加下列代码（最好插入在 <%- partial('_partial/day-night.ejs') %> 下面）

1
2
3
4
5
6
7
8
9
10
11
/* 模式判断 */
<script>
  /* 模式判断 */
  if (localStorage.getItem('isDark') === '1') {
    document.body.setAttribute('id', 'dark-mode');
    $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')
  } else {
    document.body.removeAttribute('id');
    $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon')
  }
</script>

这样黑夜模式算是真正完成了

Matery 主题自定义持续更新中…

参考

hexo-matery 主题魔改日记（2）深色模式