Choice over effort.

Home / posts/21369.html

Matery添加暗色模式

发表于 2021-08-11 | 更新于 2021-08-11
总字数: 1.4k | 阅读时长: 7分钟 | 阅读量:

制作深色模式按钮

添加按钮

在主题的layout.ejs文件中找到 body 标签的开始标签在后面加上这些 js 和 html 代码，这里我放的位置为：/layout/_partial/back-top.ejs

1
2
3
4
5
6
<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>

改为

1
2
3
4
5
6
7
8
9
<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>
<a onclick="switchNightMode()" id="sma" title="模式切换">
    <i class="fa fa-moon-o" id="nightMode" aria-hidden="true"></i>
</a>

按钮的 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
/* 深色模式按钮设置 */
#sma {
  background: #000;
  width: 38px;
  height: 38px;
  display: block;
  position: fixed;
  border-radius: 50%;
  right: 15px;
  bottom: 170px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998;
  cursor: pointer;
}

#sma .fa-moon-o {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 1.48rem !important;
}
#sma .fa-lightbulb-o {
  position: absolute;
  right: 13px;
  bottom: 8px;
  font-size: 1.5rem !important;
}

.fa-moon-o:before {
  content: "\f186";
}
.fa-comments:before {
  content: "\f086";
}

按钮的 js 代码

放在独立的 js 文件里即可，这里我放在/souce/js/matery.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
/* 深色模式按钮设置 */
if (localStorage.getItem("dark") === "1") {
  document.body.classList.add("dark");
} else {
  /*定时开启暗色模式<默认晚22点至早6点默认开启>*/
  if (new Date().getHours() >= 22 || new Date().getHours() < 6) {
    document.body.classList.add("dark");
    $("#nightMode").removeClass("fa-moon-o").addClass("fa-lightbulb");
  } else {
    if (matchMedia("(prefers-color-scheme: dark)").matches) {
      document.body.classList.add("dark");
    }
  }
}

/*提醒开启功能*/
setTimeout(function () {
  if (
    (new Date().getHours() >= 19 || new Date().getHours() < 7) &&
    !$("body").hasClass("DarkMode")
  ) {
    let toastHTML =
      '<span style="color:#97b8b2;border-radius: 10px;>' +
      '<i class="fa fa-bell" aria-hidden="true"></i>晚上使用深色模式阅读更好哦。(ﾟ▽ﾟ)/</span>';
    M.toast({ html: toastHTML });
  }
}, 2200);

/* 深色模式设置*/
function switchNightMode() {
  var body = document.body;
  if (body.classList.contains("dark")) {
    document.body.classList.remove("dark");
    localStorage.setItem("dark", "0");
    $("#nightMode").removeClass("fa-lightbulb").addClass("fa-moon-o");
    return;
  } else {
    document.body.classList.add("dark");
    localStorage.setItem("dark", "1");
    $("#nightMode").removeClass("fa-moon-o").addClass("fa-lightbulb");
    return;
  }
}

引入 CSS 暗色文件

创建 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/*暗色模式按钮样式*/
#sma {
  box-shadow: #aaa 2px 5px 10px;
  background: #000;
  width: 38px;
  height: 38px;
  display: block;
  position: fixed;
  border-radius: 50%;
  right: 15px;
  bottom: 100px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998;
  cursor: pointer;
}

#sma .fa-moon-o {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 1.48rem !important;
}

#sma .fa-lightbulb {
  position: absolute;
  right: 11px;
  bottom: 8px;
  font-size: 1.5rem !important;
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-comments:before {
  content: "\f086";
}
/* 背景颜色变灰色 */
.dark tbody,
body.dark #artDetail .post-info .post-date,
body.dark #info_user_pool .moments_chart,
body.dark .bg-cover .post-title,
body.dark .biaotis span,
body.dark .card .card-content p,
body.dark .card .card-image .card-title,
body.dark .card .toc-title,
body.dark .card-content .categories-title,
body.dark .card-content .de,
body.dark .category-content a,
body.dark .chip-container .tag-title,
body.dark .fa-lightbulb:before,
body.dark .fa-moon-o:before,
body.dark .fab,
body.dark .fas,
body.dark .friends-container .tag-title,
body.dark .frind-ship .title h1,
body.dark .moments-item-info .moments-item-time,
body.dark .moments_load_button,
body.dark .notice,
body.dark .panel-info,
body.dark .post-info .info-break-policy,
body.dark .publish-info .post-category,
body.dark .publish-info .publish-date,
body.dark .row .text,
body.dark .statis .name,
body.dark .supervise_details,
body.dark .title,
body.dark .v[data-class="v"] .vcount,
body.dark .v[data-class="v"] .vcount .vnum,
body.dark .valine-card .comment_headling,
body.dark a body.dark table,
body.dark article .article-content .summary,
body.dark article .article-tags .chip,
body.dark div.jqcloud a,
body.dark footer .copy-right,
body.dark footer a,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark header .side-nav .menu-list a,
body.dark header .side-nav .mobile-head .logo-desc,
body.dark header .side-nav .mobile-head .logo-name,
body.dark li,
body.dark p,
body.dark pre code {
  color: rgba(255, 255, 255, 0.85); /*.85为透明度，可依据需求修改*/
}
/* 背景颜色变黑色 */
body.dark,
body.dark #rewardModal .modal-content,
body.dark .archive-container,
body.dark .modal,
body.dark .v[data-class="v"] .vcount,
body.dark header .side-nav,
body.dark header .side-nav .menu-list .m-nav-show {
  background-color: #12121c;
}
/*首页文章滑动卡片文字*/
body.dark #thisTime,
body.dark .card-image-V .box-content .title {
  color: #8a2be2;
}
/*音乐播放器*/
body.dark .aplayer {
  background: #2f3742 !important;
}
/*图片滤镜*/
body.dark img,
body.dark strong {
  filter: brightness(0.7);
}
/*统计图表暗色样式*/
body.dark #categories-chart,
body.dark #category-radar,
body.dark #post-calendar,
body.dark #posts-chart,
body.dark #tags-chart {
  filter: invert(1);
}

/*toc目录滤镜*/
body.dark .skillbar .skill-bar-percent {
  color: #000;
}

/*加载动画（吃豆豆）文字颜色*/
body.dark .loading-text {
  color: #000;
}
/*一些细节背景*/
body.dark .block-with-text:after,
body.dark .card,
body.dark .collapsible-header,
body.dark .wxgzh,
body.dark table tr:nth-child(2n),
body.dark thead {
  background-color: #282c34;
}

/*about页面细节*/
body.dark .profile .author .title {
  color: #faebd7;
}
body.dark .my-projects .info .info-title a {
  color: tomato;
}

/*外挂标签*/
.swbk .label {
  color: currentColor;
}

如何修改部分细节冲突

此暗黑模式原理为在 <body> 标签添加 class="dark"

添加暗色模式时可依据 body.dark 类名 用 CSS 选择器来给含有dark 的 <body> 下的类添加属性

1
2
3
4
/*给暗黑模式下的.test添加字体颜色变红样式*/
body.dark .test {
  color: red;
}

如若冲突可考虑 !important 来添加”权重”

1
2
3
body.dark .test {
  color: red !important;
}
文章作者: 闲花
文章链接: https://www.islu.cn/posts/21369.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 闲花博客 | Lu's Blog
  • 赏
    alipay wechat 饲养员名单