scripts/js/color-scheme-toggle.js (61 lines)
1 function toggleColorScheme() { 2 const dataTheme = document.documentElement.getAttribute("data-theme"); 3 const systemDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; 4 5 if(typeof dataTheme == "undefined" || dataTheme === null) { 6 newTheme = systemDarkMode ? "light" : "dark"; 7 } else { 8 newTheme = (dataTheme === "dark") ? "light" : "dark"; 9 } 10 11 document.documentElement.setAttribute("data-theme", newTheme); 12 localStorage.setItem("data-theme", newTheme); 13 updateColorSchemeButton() 14 15 if(((newTheme === "dark") && systemDarkMode) || ((newTheme === "light") && !systemDarkMode)) { 16 console.log("Removing item"); 17 localStorage.removeItem("data-theme"); 18 } 19 } 20 21 function updateColorSchemeButton() { 22 const dataTheme = localStorage.getItem("data-theme"); 23 const systemDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; 24 const colorSchemeButtonLight = document.getElementById("color-scheme-button-light"); 25 const colorSchemeButtonDark = document.getElementById("color-scheme-button-dark"); 26 27 function buttonDarkMode() { 28 colorSchemeButtonLight.style.display = "none"; 29 colorSchemeButtonDark.style.display = "inline-block"; 30 document.documentElement.setAttribute("data-theme", "dark"); 31 } 32 33 function buttonLightMode() { 34 colorSchemeButtonLight.style.display = "inline-block"; 35 colorSchemeButtonDark.style.display = "none"; 36 document.documentElement.setAttribute("data-theme", "light"); 37 } 38 39 if(typeof dataTheme == "undefined" || dataTheme === null) { 40 if(systemDarkMode) { 41 buttonDarkMode(); 42 } else { 43 buttonLightMode(); 44 } 45 } else { 46 if(dataTheme === "dark") { 47 buttonDarkMode(); 48 } else { 49 buttonLightMode(); 50 } 51 } 52 } 53 54 function removeLocalStorage() { 55 console.log("Removing item"); 56 localStorage.removeItem("data-theme"); 57 updateColorSchemeButton(); 58 } 59 60 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", removeLocalStorage); 61 window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", removeLocalStorage);