前言


黑暗模式看起來總是很吸引人,所以有些人用過就回不去了,今天我就教大家如何製作黑暗模式。

事前準備


一個黑暗模式的 CSS ,一個光亮模式的 CSS

Demo


開始


Step 1

先在 Head 寫入這段 Code ,記得最重要是 id

1
2
<title>Light/Dark</title> 
<link id="mystylesheet" rel="stylesheet" type="text/css" href="light.css">

Step 2

Body 結尾前寫這段 Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
<button onclick="swapStyle('light.css')">光亮模式<button> <button onclick="swapStyle('dark.css')">黑暗模式</button>
</div>
<script type="text/javascript">
var setTheme = localStorage.getItem('theme')
console.log('theme:', setTheme);
if (setTheme == null){
swapStyle('light.css');
} else{
swapStyle(setTheme);
}
function swapStyle(sheet){
document.getElementById('mystylesheet').href = sheet;
localStorage.setItem('theme', sheet);
}
</script>

最後


完成啦!是不是很簡單呢 ? 我的按鈕很陽春,因為只是展示給你們效果而已,你們可以把按鈕弄得美美噠,有什麼問題就在下方評論區聯絡我