diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 750db18..e4e7d8e 100644
--- a/layouts/partials/footer.html
+++ b/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", () => {
-      window.dispatchEvent(new CustomEvent('toggle-theme'));
-    });
+    button.addEventListener('click', toggleThemeListener)
   })();
 </script>
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2e7512d..1061d5b 100644
--- a/layouts/partials/header.html
+++ b/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