https://tranhd95.github.io/js/themetoggle.js

1function setTheme(mode) {
2    localStorage.setItem("theme-storage", mode);
3}
4
5// Functions needed for the theme toggle
6// 
7
8function toggleTheme() {
9    if (localStorage.getItem("theme-storage") === "light") {
10        setTheme("dark");
11        updateItemToggleTheme();
12    } else if (localStorage.getItem("theme-storage") === "dark") {
13        setTheme("light");
14        updateItemToggleTheme();
15    }
16}
17
18function updateItemToggleTheme() {
19    let mode = getSavedTheme();
20
21    const darkModeStyle = document.getElementById("darkModeStyle");
22    if (darkModeStyle) {
23        darkModeStyle.disabled = (mode === "light");
24    }
25    
26    const sunIcon = document.getElementById("sun-icon");
27    const moonIcon = document.getElementById("moon-icon");
28    if (sunIcon && moonIcon) {
29        sunIcon.style.display = (mode === "dark") ? "inline-block" : "none";
30        moonIcon.style.display = (mode === "light") ? "inline-block" : "none";
31    }
32
33    let htmlElement = document.querySelector("html");
34    if (mode === "dark") {
35        htmlElement.classList.remove("light")
36        htmlElement.classList.add("dark")
37    } else if (mode === "light") {
38        htmlElement.classList.remove("dark")
39        htmlElement.classList.add("light")
40    }
41}
42
43function getSavedTheme() {

44    let currentTheme = localStorage.getItem("theme-storage");
45    if(!currentTheme) {
46        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
47            currentTheme = "dark";
48        } else {
49            currentTheme = "light";
50        }
51    }
52
53    return currentTheme;
54}
55
56// Update the toggle theme on page load
57updateItemToggleTheme();