ensure the toggle theme click event listener is only added once

layouts/partials/footer.html

@@ -34,10 +34,11 @@
       return;
     }
 
+    let button = document.getElementById("theme-toggle")
+    // remove the listeners first to prevent adding duplicated listener when history goes back and forth
+    button.removeEventListener('click', toggleThemeListener)
     // listen to toggle button
-    document.getElementById("theme-toggle").addEventListener("click", () => {
+    button.addEventListener('click', toggleThemeListener)
-      window.dispatchEvent(new CustomEvent('toggle-theme'));
-    });
   })();
 </script>
 

layouts/partials/header.html

@@ -48,6 +48,13 @@ window.addEventListener('toggle-theme', function() {
     toggleThemeCallbacks[key](isDark)
   }
 });
+
+// this function is used as the event listener for toggle-theme button click
+function toggleThemeListener() {
+  // console.log('click theme-toggle')
+  window.dispatchEvent(new CustomEvent('toggle-theme'));
+}
+
 </script>
 <script>
   // load theme, as early as possible