Mirror of my GitHub Pages site
www.spenser.black/
Save and load theme choice
Spenser Black
(Jun 27, 2026, 9:39 AM EDT)
e08432c1
7c038c60
+16
-1
+16
-1
src/scripts/theme-dropdown.ts
+16
-1
src/scripts/theme-dropdown.ts
···
2
2
const button = document.getElementById("theme-dropdown-button") as HTMLButtonElement;
3
3
const content = document.getElementById("theme-dropdown-content") as HTMLDivElement;
4
4
5
+
const themeKey = "spenserblack.github.io theme";
6
+
const setTheme = (theme: string) => {
7
+
document.documentElement.dataset.theme = theme;
8
+
};
9
+
const saveTheme = (theme: string) => {
10
+
localStorage.setItem(themeKey, theme);
11
+
};
12
+
const loadTheme = (): string | null => localStorage.getItem(themeKey);
13
+
14
+
// NOTE Set theme for initial load.
15
+
const savedTheme = loadTheme();
16
+
if (savedTheme !== null) {
17
+
setTheme(savedTheme);
18
+
}
5
19
6
20
const buttonVariants: [string, HTMLButtonElement][] = ["system", "dark", "light"]
7
21
.map((variant) => [variant, document.getElementById(`theme-${variant}`) as HTMLButtonElement]);
···
36
50
buttonVariants
37
51
.forEach(([variant, button]) => {
38
52
button.addEventListener("mousedown", () => {
39
-
document.documentElement.dataset.theme = variant;
53
+
setTheme(variant);
54
+
saveTheme(variant);
40
55
hide();
41
56
});
42
57
});