const themeToggle = document.getElementById("theme"); let userPreference = getUserPreference(); setAppliedMode(getAppliedMode(userPreference)); themeToggle.addEventListener("click", togglePreference, false) function getUserPreference() { return localStorage.getItem("theme") || "light"; } function saveUserPreference(userPreference) { localStorage.setItem("theme", userPreference); } function getAppliedMode(userPreference) { if (userPreference === "light") { return "light"; } if (userPreference === "dark") { return "dark"; } if (matchMedia("(prefers-color-scheme: light)").matches) { return "light"; } return "dark"; } function setAppliedMode(mode) { document.documentElement.dataset.appliedMode = mode; } function togglePreference() { if (userPreference === "light") { userPreference = "dark"; } else if (userPreference === "dark") { userPreference = "light"; } console.log(userPreference); saveUserPreference(userPreference); setAppliedMode(getAppliedMode(userPreference)); } function toggleDarkMode() { if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/"; else document.cookie = "darkMode=on;path=/"; refreshDarkMode(); } function refreshDarkMode() { let darkMode = getCookie("darkMode", "off", "/") === "on"; if (darkMode) { document.body.classList.add("dark-theme"); document.getElementById("theme").checked = true; } else { if (document.body.classList.contains("dark-theme")) { document.body.classList.remove("dark-theme"); } document.getElementById("theme").checked = false; } } function getCookie(cookieName, valIfNotExists, path) { let cookieArray = document.cookie.split(";"); for (let i = 0; i < cookieArray.length; i++) { let cookie = cookieArray[i].split("="); if (cookie[0].trim() === cookieName) { return cookie[1]; } } console.warn("Cookie \"" + cookieName + "\" does not exist"); document.cookie = cookieName + "=" + valIfNotExists + ";path=" + path; return valIfNotExists; }