引言

我看過有很多 Matery 主題的用家都有自己加黑暗模式,他們的好像有用 cookielocalStorage,但並不能儲存使用者上一次的選擇模式。我也不知道為什麼。

TszHong 版本的優點

  • 可紀錄用戶上一次瀏覽時選擇的模式。
  • TOP10 標簽統計圖, 文章分類統計圖,文章發布統計圖, 文章分類雷達圖, 文章統計圖,清晰可見,目前沒有看到其他人做得到。
  • 可以在主題配置直接設定 距離底部高度

步驟一

主題配置的任意位置新增

1
2
3
4
5
# Dark mode
# 黑暗模式
darkMode:
enable: true
height: # 距離底部的高度 預設 135px (可留空)

步驟二

[根目錄]\themes\matery\layout\_partial\ 新增 dark-mode.ejs 檔案。

並在 dark-mode.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
<!-- 黑暗模式按鈕 -->
<div id="darkMode" class="darkmode-btn" onclick="switchDarkMode()">
<a href="#!">
<i class="fas fa-moon"></i>
</a>
</div>
<script>
if (localStorage.getItem("dark") === "enable") {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
</script>
<script defer>
document.getElementById("darkMode").style.bottom = "<%- theme.darkMode.height %>";

var bodyElement = document.body

function switchDarkMode() {
if (bodyElement.classList.contains('dark')) {
localStorage.setItem("dark", "unenable");
bodyElement.classList.remove('dark');
} else {
localStorage.setItem("dark", "enable");
bodyElement.classList.add('dark');
}
}
</script>

步驟三

[根目錄]\themes\matery\layout\layout.ejs18行 新增

1
2
3
<% if (theme.darkMode.enable) { %>
<%- partial('_partial/dark-mode') %>
<% } %>

步驟四

[根目錄]\themes\matery\source\css\my.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
/* 黑暗暗模式按鈕樣式 */
.darkmode-btn {
position: fixed;
right: 15px;
bottom: 135px;
z-index: 998;
background: #000;
border-radius: 30px;
width: 50px;
height: 50px;
}
/* 深色模式設置 */
/* 字體顏色變灰白色 */
body.dark .fas,
body.dark .title,
body.dark .row .text,
body.dark article .article-content .summary,
body.dark .card .card-image .card-title,
body.dark .fa-moon-o:before,
body.dark .fa-lightbulb-o:before,
body.dark article .article-tags .chip,
body.dark .chip-container .tag-title,
body.dark div.jqcloud a,
body.dark .friends-container .tag-title,
body.dark .frind-ship .title h1,
body.dark .card .card-content p,
body.dark .v[data-class=v] .vcount,
body.dark .v[data-class=v] .vcount .vnum,
body.dark pre code,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark li,
body.dark p,
body.dark header .side-nav .mobile-head .logo-name,
body.dark header .side-nav .mobile-head .logo-desc,
body.dark header .side-nav .menu-list a,
body.dark .bg-cover .post-title,
body.dark a,
body.dark .my-projects .info .info-title a
{
color: rgba(255, 255, 255, 0.6);
}

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

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

/* 改變透明度 */
body.dark .aplayer{background: #2f3742!important;}
body.dark img, body.dark strong {
filter: brightness(.7);
}

/* 統計圖濾鏡 */
body.dark #post-calendar,
body.dark #category-radar,
body.dark #tags-chart,
body.dark #categories-chart,
body.dark #posts-chart {
filter: invert(1);
}

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

最後

在統計圖,我想到的解決辦法就是使用 filter: invert(1);。