fix dark mode toggle errors and improve element loading

darkmode.js

@@ -1,53 +1,66 @@
-// Check for saved dark mode preference in localStorage
-let darkmode = localStorage.getItem("darkmode");
-const themeToggleBtn = document.getElementById("theme-toggle");
-const themeIcon = document.getElementById("theme-toggle-icon");
-const body = document.body;
-const footer = document.querySelector("footer"); // Select the footer element
-const footerSpan = footer.querySelector(".website-name"); // Select the span inside the footer
-const footerParagraph = footer.querySelector(".footer-about-text");
+document.addEventListener("DOMContentLoaded", () => {
+  // Check for saved dark mode preference in localStorage
+  let darkmode = localStorage.getItem("darkmode");
+  const themeToggleBtn = document.getElementById("theme-toggle");
+  const themeIcon = document.getElementById("theme-toggle-icon");
+  const body = document.body;
+  const footer = document.querySelector("footer"); // Select the footer element
 
-// Enable Dark Mode
-const enableDarkMode = () => {
-  body.classList.add("dark-mode");
-  body.classList.remove("light-mode"); // Ensure light mode class is removed
-  footer.classList.add("dark-mode-footer"); // Add dark mode class to footer
-  footer.classList.remove("light-mode-footer");
-  footerSpan.classList.add("dark-text");
-  footerSpan.classList.remove("light-text");
-  footerParagraph.classList.add("dark-text");
-  footerParagraph.classList.remove("light-text");
-  localStorage.setItem("darkmode", "active");
-  themeIcon.src = "images/light-mode.png"; // Light mode icon in dark mode
-};
+  // Ensure footer is found
+  if (!footer) {
+      console.error("Footer element not found.");
+      return; // Exit if footer is not available
+  }
+
+  const footerSpan = footer.querySelector(".website-name"); // Select the span inside the footer
+  const footerParagraph = footer.querySelector(".footer-about-text");
 
-// Disable Dark Mode (Switch to Light Mode)
-const disableDarkMode = () => {
-  body.classList.remove("dark-mode");
-  body.classList.add("light-mode"); // Ensure light mode class is added
-  footer.classList.remove("dark-mode-footer"); // Remove dark mode class from footer
-  footer.classList.add("light-mode-footer");
-  footerSpan.classList.add("light-text");
-  footerSpan.classList.remove("dark-text");
-  footerParagraph.classList.add("light-text");
-  footerParagraph.classList.remove("dark-text");
-  localStorage.setItem("darkmode", "inactive");
-  themeIcon.src = "images/dark-mode.png"; // Dark mode icon in light mode
-};
+  // Enable Dark Mode
+  const enableDarkMode = () => {
+      body.classList.add("dark-mode");
+      body.classList.remove("light-mode");
+      footer.classList.add("dark-mode-footer");
+      footer.classList.remove("light-mode-footer");
+      footerSpan.classList.add("dark-text");
+      footerSpan.classList.remove("light-text");
+      footerParagraph.classList.add("dark-text");
+      footerParagraph.classList.remove("light-text");
+      localStorage.setItem("darkmode", "active");
+      themeIcon.src = "images/light-mode.png"; // Light mode icon in dark mode
+  };
 
-// Apply the saved theme on page load
-if (darkmode === "active") {
-  enableDarkMode(); // Start in dark mode if the user prefers it
-} else {
-  disableDarkMode(); // Otherwise, start in light mode
-}
+  // Disable Dark Mode (Switch to Light Mode)
+  const disableDarkMode = () => {
+      body.classList.remove("dark-mode");
+      body.classList.add("light-mode");
+      footer.classList.remove("dark-mode-footer");
+      footer.classList.add("light-mode-footer");
+      footerSpan.classList.add("light-text");
+      footerSpan.classList.remove("dark-text");
+      footerParagraph.classList.add("light-text");
+      footerParagraph.classList.remove("dark-text");
+      localStorage.setItem("darkmode", "inactive");
+      themeIcon.src = "images/dark-mode.png"; // Dark mode icon in light mode
+  };
 
-// Toggle dark mode on button click
-themeToggleBtn.addEventListener("click", () => {
-  darkmode = localStorage.getItem("darkmode"); // Get the current state
+  // Apply the saved theme on page load
   if (darkmode === "active") {
-    disableDarkMode(); // Switch to light mode
+      enableDarkMode(); // Start in dark mode if the user prefers it
+  } else {
+      disableDarkMode(); // Otherwise, start in light mode
+  }
+
+  // Ensure button exists before adding event listener
+  if (themeToggleBtn) {
+      themeToggleBtn.addEventListener("click", () => {
+          darkmode = localStorage.getItem("darkmode"); // Get the current state
+          if (darkmode === "active") {
+              disableDarkMode(); // Switch to light mode
+          } else {
+              enableDarkMode(); // Switch to dark mode
+          }
+      });
   } else {
-    enableDarkMode(); // Switch to dark mode
+      console.error("Theme toggle button not found.");
   }
 });

index.html

@@ -6,9 +6,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css" type="text/css" />
-    <script src="common.js" defer></script>
     <script src="script.js" defer></script>
-    <script type="text/javascript" src="darkmode.js" defer></script>
+    <script src="common.js" defer></script>
+    <script src="darkmode.js" defer></script>
     <link rel="icon" type="image/png" href="images/logo copy.png">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">