Merge pull request #371 from sezallagwal/fix/DarkModeFooter

fixed dark mode toggle for footer section

darkmode.js

@@ -3,11 +3,20 @@ 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");
 
 // 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
 };
@@ -16,6 +25,12 @@ const enableDarkMode = () => {
 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
 };

index.html

@@ -228,7 +228,7 @@ <h3>Add Event</h3>
             <div class="calendar-grid" id="calendar-grid"></div>
         </div>
     </section>
-
+<hr>
     <footer class="footer-section">
         <div class="container">
           <!-- Logo and About Section -->

styles.css

@@ -907,6 +907,26 @@ body.dark-mode #theme-switch {
     color: #6b7280;
     font-family: 'Arial', sans-serif;
   }
+
+/* Light Mode Footer */
+.light-mode-footer {
+  background-color: #f8f9fa;
+  color: #000;
+}
+
+/* Dark Mode Footer */
+.dark-mode-footer {
+  background-color: #2E2E2E;
+  color: #fff;
+}
+
+.dark-text {
+  color: #f1f1f1;
+}
+
+.light-text {
+  color: black;
+}
 
   .container {
     max-width: 1200px;
@@ -937,13 +957,11 @@ body.dark-mode #theme-switch {
   .website-name {
     font-size: 1.5rem;
     font-weight: bold;
-    color: #111827;
   }
 
   .footer-about-text {
     margin-top: 15px;
     line-height: 1.6;
-    color: #000;
     font-style: italic;
   }