diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js index fb4accff4..46a4406dc 100644 --- a/static/js/themeSwitcher.js +++ b/static/js/themeSwitcher.js @@ -1,33 +1,37 @@ // Get the theme switcher button element. const themeSwitcher = document.querySelector(".theme-switcher"); -// Retrieve theme from localStorage. -let currentTheme = localStorage.getItem("theme"); +// Retrieve theme from either the localStorage or the data-theme attribute on the document element. +let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme'); -// Function to switch between dark and light themes. -function setTheme(theme) { +// Function to set theme +function setTheme(theme, saveToLocalStorage = false) { document.documentElement.setAttribute("data-theme", theme); - localStorage.setItem("theme", theme); + currentTheme = theme; + + if (saveToLocalStorage) { + localStorage.setItem("theme", theme); + } - // Dispatch a custom event for comment systems. + // Dispatch a custom event for utterances and giscus. const event = new CustomEvent("themeChanged", { detail: { theme: theme } }); window.dispatchEvent(event); } +// Function to switch between dark and light themes. function switchTheme() { // Set the new theme based on the current theme. const newTheme = currentTheme === "dark" ? "light" : "dark"; - setTheme(newTheme); + setTheme(newTheme, true); // Save the theme to localStorage when the user changes it. } +// Initialize the theme switcher button. themeSwitcher.addEventListener("click", switchTheme, false); // Update the theme based on system preference if the user hasn't manually changed the theme. window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { - if (!localStorage.getItem("theme")) { - const newTheme = e.matches ? "dark" : "light"; - setTheme(newTheme); - } + const newTheme = e.matches ? "dark" : "light"; + setTheme(newTheme); }); diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js index bd58b9df9..d70026980 100644 --- a/static/js/themeSwitcher.min.js +++ b/static/js/themeSwitcher.min.js @@ -1,37 +1 @@ -// Get the theme switcher button element. -const themeSwitcher = document.querySelector(".theme-switcher"); - -// Retrieve theme from localStorage. -let currentTheme = localStorage.getItem("theme"); - -// Function to set theme -function setTheme(theme, saveToLocalStorage = false) { - document.documentElement.setAttribute("data-theme", theme); - currentTheme = theme; - - if (saveToLocalStorage) { - localStorage.setItem("theme", theme); - } - - // Dispatch a custom event for utterances and giscus. - const event = new CustomEvent("themeChanged", { - detail: { theme: theme } - }); - window.dispatchEvent(event); -} - -// Function to switch between dark and light themes. -function switchTheme() { - // Set the new theme based on the current theme. - const newTheme = currentTheme === "dark" ? "light" : "dark"; - setTheme(newTheme, true); // Save the theme to localStorage when the user changes it. -} - -// Initialize the theme switcher button. -themeSwitcher.addEventListener("click", switchTheme, false); - -// Update the theme based on system preference if the user hasn't manually changed the theme. -window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { - const newTheme = e.matches ? "dark" : "light"; - setTheme(newTheme); -}); +const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,t&&localStorage.setItem("theme",e);t=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(t)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")});