portfolio/theme.js at main · 961028/portfolio · GitHub

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
function toggleTheme() {
	const current = document.documentElement.getAttribute("data-theme");
	const next = current === "dark" ? "light" : "dark";
	document.documentElement.setAttribute("data-theme", next);
	localStorage.setItem("theme", next);
}

function toggleFontSize() {
	const current = document.documentElement.getAttribute("data-font-scale");
	if (current === "large") {
		document.documentElement.removeAttribute("data-font-scale");
		document.documentElement.style.removeProperty("--font-scale");
		localStorage.removeItem("fontScale");
	} else {
		document.documentElement.setAttribute("data-font-scale", "large");
		document.documentElement.style.setProperty("--font-scale", "1.4");
		localStorage.setItem("fontScale", "large");
	}
}

window.addEventListener("pageshow", (event) => {
	if (event.persisted) {
		const theme = localStorage.getItem("theme") || "light";
		document.documentElement.setAttribute("data-theme", theme);

		const fontScale = localStorage.getItem("fontScale");
		if (fontScale === "large") {
			document.documentElement.setAttribute("data-font-scale", "large");
			document.documentElement.style.setProperty("--font-scale", "1.15");
		} else {
			document.documentElement.removeAttribute("data-font-scale");
			document.documentElement.style.removeProperty("--font-scale");
		}
	}
});

document.addEventListener("DOMContentLoaded", () => {
	document
		.querySelector(".theme-toggle")
		?.addEventListener("click", toggleTheme);
	document
		.querySelector(".font-size-toggle")
		?.addEventListener("click", toggleFontSize);
});