♻️ refactor: simplify theme switching logic

🐛 fix: ensure currentTheme is initialized correctly

static/js/main.js

@@ -1,23 +1,29 @@
-const themeSwitcher = document.querySelector('.theme-switcher');
+// Get the theme switcher button element.
-let currentTheme = localStorage.getItem('theme');
+const themeSwitcher = document.querySelector(".theme-switcher");
-let userHasManuallyChangedTheme = currentTheme !== null;
 
-function setTheme(theme) {
+// Retrieve theme from localStorage.
-  document.documentElement.setAttribute('data-theme', theme);
+let currentTheme = localStorage.getItem("theme");
-  localStorage.setItem('theme', theme);
-  currentTheme = theme;
-}
 
+// Function to switch between dark and light themes.
 function switchTheme() {
-  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    // Set the new theme based on the current theme.
-  setTheme(newTheme);
+    currentTheme = currentTheme === "dark" ? "light" : "dark";
-  userHasManuallyChangedTheme = true;
+    document.documentElement.setAttribute("data-theme", currentTheme);
+    localStorage.setItem("theme", currentTheme);
 }
 
-themeSwitcher.addEventListener('click', switchTheme, false);
+// Initialize the theme switcher button.
+themeSwitcher.addEventListener("click", switchTheme, false);
 
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+// Update the theme based on system preference if the user hasn't manually changed the theme.
-  if (!userHasManuallyChangedTheme) {
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
-    setTheme(e.matches ? 'dark' : 'light');
+    if (!localStorage.getItem("theme")) {
-  }
+        currentTheme = e.matches ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", currentTheme);
+    }
 });
+
+// Fix the theme switcher button not working on the first click by updating currentTheme.
+if (!currentTheme) {
+    currentTheme = document.documentElement.getAttribute("data-theme");
+}

static/js/main_min.js

@@ -1 +1 @@
-const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme"),userHasManuallyChangedTheme=null!==currentTheme;function setTheme(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e),currentTheme=e}function switchTheme(){let e="dark"===currentTheme?"light":"dark";setTheme(e),userHasManuallyChangedTheme=!0}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{userHasManuallyChangedTheme||setTheme(e.matches?"dark":"light")});
+const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme");function switchTheme(){currentTheme="dark"===currentTheme?"light":"dark",document.documentElement.setAttribute("data-theme",currentTheme),localStorage.setItem("theme",currentTheme)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||(currentTheme=e.matches?"dark":"light",document.documentElement.setAttribute("data-theme",currentTheme))}),currentTheme||(currentTheme=document.documentElement.getAttribute("data-theme"));