前言


我只是分享我使用的 黑暗/深色 模式的做法,並不代表我是專業的,過程中可能有 Bug ,不過到現在還沒有發現有 Bug ,還請各位發現有 Bug 或有建議的地方立刻通知我。

教學


HTML 和 CSS 碼


下面是 Dark mode 按鈕的 CSSHTML

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
<style>
.darkmode-btn {
position: fixed;
right: 15px;
bottom: 76px;
padding-top: 15px;
margin-bottom: 0;
z-index: 998;
padding: 8px;
border-radius: 30px;
background-color: var(--dark-btn-background); /* 這裏是變量,看到下面就會懂的,記得加 var 哦 */
}
</style>
<span title="黑暗模式" id="darkmode-button" class="darkmode-btn"><i class="fas fa-moon fa-2x"></i></span>
<script>
const darkBtn = document.querySelector('.darkmode-btn');
const bodyEl = document.querySelector('body');

const darkMode = () => {
bodyEl.classList.toggle('dark')
}

darkBtn.addEventListener('click', () => {
// 當每次點擊按鈕時獲取 local storage 裏的 dark 項目的值
setDarkMode = localStorage.getItem('dark');

if (setDarkMode !== "on") {
darkMode();
// 當黑暗模式是開啟時將項目設為 "on"
setDarkMode = localStorage.setItem('dark', 'on');
} else {
darkMode();
// 當黑暗模式是關閉時將項目設為 "null"
setDarkMode = localStorage.setItem('dark', null);
}

});

// 從本地存儲中獲取“黑暗”項目的值
let setDarkMode = localStorage.getItem('dark');

// 在頁面重新加載時檢查黑暗模式是打開還是關閉
if (setDarkMode === 'on') {
darkMode();
}
</script>

按鈕展示


明亮按鈕

黑暗按鈕

顏色設定


先為黑暗模式建立一個 CSS ,這裏我就改做 matery-dark.css 好了,因為我的主題叫 matery 。我們先來設定黑暗模式按鈕的樣式吧!

1
2
3
4
5
6
7
:root { /* 這個是必要的 */
--dark-btn-background: #fff; /* 這裏是設定在明亮模式時顯示的顏色 */
}

.dark { /* 這個是必要的 */
--dark-btn-background: #2d2d2d; /* 這裏是設定在黑暗模式時顯示的顏色 */
}

以後有什麼要 黑暗模式 時轉色,就可以運用以上方式,我再舉一個例子。

例子


1
<div class="container">TEST</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root {
--dark-btn-background: #fff;
--container-background-color: #fff;
}

.dark {
--dark-btn-background: #2d2d2d;
--container-background-color: black;
}

.container {
background-color: var(--container-background-color);
width: 100px;
height: 100px;
}

這樣總該明白了吧!