fix broken theme switch

layouts/home.html

@@ -196,8 +196,8 @@
                             stroke-linejoin="round">
                             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                         </svg>
-                        <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
+                        <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                             stroke-linejoin="round">
                             <circle cx="12" cy="12" r="5"></circle>
                             <line x1="12" y1="1" x2="12" y2="3"></line>
@@ -242,15 +242,46 @@
   <!-- Script to toggle theme. has to be at the end of the page -->
   {{- if (not site.Params.disableThemeToggle) }}
   <script>
-      document.getElementById("theme-toggle").addEventListener("click", () => {
+      document.addEventListener("DOMContentLoaded", () => {
-          if (document.body.className.includes("dark")) {
+          const themeToggleButton = document.getElementById("theme-toggle");
-              document.body.classList.remove('dark');
+          if (themeToggleButton) {
-              localStorage.setItem("pref-theme", 'light');
+              themeToggleButton.addEventListener("click", () => {
+                  if (document.body.className.includes("dark")) {
+                      document.body.classList.remove('dark');
+                      localStorage.setItem("pref-theme", 'light');
+                  } else {
+                      document.body.classList.add('dark');
+                      localStorage.setItem("pref-theme", 'dark');
+                  }
+              });
           } else {
-              document.body.classList.add('dark');
+              console.error("Theme toggle button not found");
-              localStorage.setItem("pref-theme", 'dark');
           }
-      })
+      });
+  </script>
+  <script>
+      const observer = new MutationObserver(() => {
+          const themeToggleButton = document.getElementById("theme-toggle");
+          if (themeToggleButton) {
+              observer.disconnect(); // Stop observing once the button is found. Explanation :
+              /*
+              the .theme-toggle button is being rendered dynamically (e.g., via a Hugo partial or JavaScript),
+              so it might not exist in the DOM when the script runs.
+              To handle this, you can use a MutationObserver to detect when the button is added to the DOM
+              */
+              themeToggleButton.addEventListener("click", () => {
+                  if (document.body.className.includes("dark")) {
+                      document.body.classList.remove('dark');
+                      localStorage.setItem("pref-theme", 'light');
+                  } else {
+                      document.body.classList.add('dark');
+                      localStorage.setItem("pref-theme", 'dark');
+                  }
+              });
+          }
+      });
+
+      observer.observe(document.body, { childList: true, subtree: true });
   </script>
   {{- end }}
 </footer>