From ac24b460fbbc01662aaa182237172ebcd1a92f96 Mon Sep 17 00:00:00 2001
From: sezallagwal <sezal1470@gmail.com>
Date: Wed, 23 Oct 2024 21:36:33 +0530
Subject: [PATCH] fixed dark mode toggle for footer section

---
 darkmode.js | 15 +++++++++++++++
 index.html  |  2 +-
 styles.css  | 22 ++++++++++++++++++++--
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/darkmode.js b/darkmode.js
index 946e081..973fd6d 100644
--- a/darkmode.js
+++ b/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
 };
diff --git a/index.html b/index.html
index 8f3f6c2..6e3c8f9 100644
--- a/index.html
+++ b/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 -->
diff --git a/styles.css b/styles.css
index 85c86c9..3a90f2a 100644
--- a/styles.css
+++ b/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;
   }