fix(ui): Centralize theme toggle logic for consistency

about.html

@@ -302,5 +302,7 @@ <h3 class="footer-title">Support</h3>
   </footer>
 </body>
 <script src="assets/js/about.js"></script>
+<script src="assets/js/theme.js"></script>
+
 
 </html>

assets/js/about.js

@@ -137,35 +137,4 @@ document.addEventListener("DOMContentLoaded", function () {
       hamburger.classList.remove("active");
     }
   });
-   // ================= Dark Mode Toggle =================
-  const darkModeBtn = document.getElementById("darkModeToggle");
-  const darkModeIcon = darkModeBtn.querySelector("i");
-
-  // Apply saved preference on page load
-  if (localStorage.getItem("darkMode") === "enabled") {
-    document.body.classList.add("dark-mode");
-    darkModeIcon.classList.remove("fa-moon");
-    darkModeIcon.classList.add("fa-sun");
-  }
-
-  darkModeBtn.addEventListener("click", () => {
-    document.body.classList.toggle("dark-mode");
-
-    if (document.body.classList.contains("dark-mode")) {
-      localStorage.setItem("darkMode", "enabled");
-      darkModeIcon.classList.remove("fa-moon");
-      darkModeIcon.classList.add("fa-sun");
-    } else {
-      localStorage.setItem("darkMode", "disabled");
-      darkModeIcon.classList.remove("fa-sun");
-      darkModeIcon.classList.add("fa-moon");
-    }
-  });
-});
-
-
-
-
-
-
-
+});

assets/js/theme.js

@@ -0,0 +1,40 @@
+// Centralized Dark Mode Toggle Logic
+document.addEventListener('DOMContentLoaded', () => {
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    if (!darkModeToggle) return; // Exit if the button isn't on the page
+
+    const body = document.body;
+    const darkModeIcon = darkModeToggle.querySelector("i");
+
+    // Function to apply the theme based on localStorage
+    const applyTheme = () => {
+        const currentTheme = localStorage.getItem("theme") || "light";
+        if (currentTheme === "dark") {
+            body.classList.add("dark-mode");
+            if (darkModeIcon) {
+                darkModeIcon.classList.remove("fa-moon");
+                darkModeIcon.classList.add("fa-sun");
+            }
+        } else {
+            body.classList.remove("dark-mode");
+            if (darkModeIcon) {
+                darkModeIcon.classList.remove("fa-sun");
+                darkModeIcon.classList.add("fa-moon");
+            }
+        }
+    };
+
+    // Event listener for the toggle button
+    darkModeToggle.addEventListener("click", () => {
+        body.classList.toggle("dark-mode");
+        let theme = "light";
+        if (body.classList.contains("dark-mode")) {
+            theme = "dark";
+        }
+        localStorage.setItem("theme", theme);
+        applyTheme(); // Update icon state
+    });
+
+    // Apply the theme on initial page load
+    applyTheme();
+});

contact.html

@@ -993,29 +993,10 @@ <h3 class="footer-title">Support</h3>
         </div>
     </footer>
     <!-- JS for dark mode and nav toggle -->
+
+    <script src="assets/js/theme.js"></script>
     <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
+
         // Mobile Navigation Toggle
         const hamburger = document.getElementById("hamburger");
         const navLinks = document.getElementById("navLinks");