Fixed Dark mode bug

Author: localhost433

js/header-footer.js

@@ -1,8 +1,17 @@
+function loadHeaderFooter() {
+    return Promise.all([
+        fetch("/components/header.html")
+            .then(response => response.text())
+            .then(data => document.getElementById("header-placeholder").innerHTML = data),
+        fetch("/components/footer.html")
+            .then(response => response.text())
+            .then(data => document.getElementById("footer-placeholder").innerHTML = data)
+    ]);
+}
+
+// After header and footer are loaded, then init dark mode
 document.addEventListener("DOMContentLoaded", () => {
-    fetch("/components/header.html")
-        .then(response => response.text())
-        .then(data => document.getElementById("header-placeholder").innerHTML = data);
-    fetch("/components/footer.html")
-        .then(response => response.text())
-        .then(data => document.getElementById("footer-placeholder").innerHTML = data);
+    loadHeaderFooter().then(() => {
+        initializeThemeToggle(); // <-- call dark mode setup AFTER loading header/footer
+    });
 });

js/theme.js

@@ -1,32 +1,35 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const toggleBtn = document.getElementById("theme-toggle");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const storedTheme = localStorage.getItem("theme");
-  
-    const enableDark = () => {
+function initializeThemeToggle() {
+  const toggleBtn = document.getElementById("theme-toggle");
+  if (!toggleBtn) {
+      console.warn("Theme toggle button not found.");
+      return;
+  }
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const storedTheme = localStorage.getItem("theme");
+
+  const enableDark = () => {
       document.documentElement.classList.add("dark-mode");
       localStorage.setItem("theme", "dark");
       toggleBtn.textContent = "Light Mode";
-    };
-  
-    const disableDark = () => {
+  };
+
+  const disableDark = () => {
       document.documentElement.classList.remove("dark-mode");
       localStorage.setItem("theme", "light");
       toggleBtn.textContent = "Dark Mode";
-    };
-  
-    if (storedTheme === "dark" || (!storedTheme && prefersDark)) {
+  };
+
+  if (storedTheme === "dark" || (!storedTheme && prefersDark)) {
       enableDark();
-    } else {
+  } else {
       disableDark();
-    }
-  
-    toggleBtn.addEventListener("click", () => {
+  }
+
+  toggleBtn.addEventListener("click", () => {
       if (document.documentElement.classList.contains("dark-mode")) {
-        disableDark();
+          disableDark();
       } else {
-        enableDark();
+          enableDark();
       }
-    });
   });
-  
+}

post.html

@@ -28,7 +28,6 @@ <h1>Blog</h1>
             <p>Collection of posts I've written about various topics.</p>
             <!-- Blog posts dynamically loaded here -->
         </section>
-
         <a href="index.html" class="back-link">Back to Home</a>
     </main>