FossilRepo
|
1
|
'use strict'; |
|
2
|
{ |
|
3
|
function setTheme(mode) { |
|
4
|
if (mode !== "light" && mode !== "dark" && mode !== "auto") { |
|
5
|
console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`); |
|
6
|
mode = "auto"; |
|
7
|
} |
|
8
|
document.documentElement.dataset.theme = mode; |
|
9
|
localStorage.setItem("theme", mode); |
|
10
|
} |
|
11
|
|
|
12
|
function cycleTheme() { |
|
13
|
const currentTheme = localStorage.getItem("theme") || "auto"; |
|
14
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; |
|
15
|
|
|
16
|
if (prefersDark) { |
|
17
|
// Auto (dark) -> Light -> Dark |
|
18
|
if (currentTheme === "auto") { |
|
19
|
setTheme("light"); |
|
20
|
} else if (currentTheme === "light") { |
|
21
|
setTheme("dark"); |
|
22
|
} else { |
|
23
|
setTheme("auto"); |
|
24
|
} |
|
25
|
} else { |
|
26
|
// Auto (light) -> Dark -> Light |
|
27
|
if (currentTheme === "auto") { |
|
28
|
setTheme("dark"); |
|
29
|
} else if (currentTheme === "dark") { |
|
30
|
setTheme("light"); |
|
31
|
} else { |
|
32
|
setTheme("auto"); |
|
33
|
} |
|
34
|
} |
|
35
|
} |
|
36
|
|
|
37
|
function initTheme() { |
|
38
|
// set theme defined in localStorage if there is one, or fallback to auto mode |
|
39
|
const currentTheme = localStorage.getItem("theme"); |
|
40
|
currentTheme ? setTheme(currentTheme) : setTheme("auto"); |
|
41
|
} |
|
42
|
|
|
43
|
window.addEventListener('load', function(_) { |
|
44
|
const buttons = document.getElementsByClassName("theme-toggle"); |
|
45
|
Array.from(buttons).forEach((btn) => { |
|
46
|
btn.addEventListener("click", cycleTheme); |
|
47
|
}); |
|
48
|
}); |
|
49
|
|
|
50
|
initTheme(); |
|
51
|
} |
|
52
|
|