edit footer

coders51 · Apr 10, 2024 · 0f515bd · 0f515bd
1 parent 2d89b03
commit 0f515bd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/components/DarkModeToggle/DarkModeToggle.tsx b/src/components/DarkModeToggle/DarkModeToggle.tsx
@@ -19,17 +19,19 @@ const DarkModeToggle = () => {
         "duration-100"
       );
       document.documentElement.classList.remove("dark");
-      localStorage.theme = "light";
+      localStorage.setItem("theme", "light");
       setDarkMode(false);
     } else {
       document.documentElement.classList.add(
         "dark",
         "transition-colors",
         "duration-100"
       );
-      localStorage.theme = "dark";
+      localStorage.setItem("theme", "dark");
       setDarkMode(true);
     }
+
+    window.dispatchEvent(new Event("themeChange"));
   }
 
   return (

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -6,15 +6,20 @@ import { XIcon } from "./icons/XIcon";
 
 <footer>
   <div
-    class="mx-auto lg:px-10 lg:py-8 px-8 py-4 dark:bg-coders51dark/20 bg-darkBg/20"
+    class="mx-auto lg:px-10 lg:py-8 px-8 py-4 border-t border-darkBg dark:border-coders51dark"
   >
     <div class="lg:w-1/2 mx-auto">
       <div class="w-full flex items-center justify-center lg:justify-start">
         <div
           class="sm:w-1/2 w-full items-center flex justify-center lg:justify-start"
         >
           <a href="http://www.coders51.com" class="inline-block">
-            <img src="/assets/logo.png" alt="Coders51 Logo" class="w-28" />
+            <img
+              id="footer-logo"
+              src="/assets/logo.png"
+              alt="Coders51 Logo"
+              class="w-28"
+            />
           </a>
         </div>
       </div>
@@ -40,3 +45,23 @@ import { XIcon } from "./icons/XIcon";
     </div>
   </div>
 </footer>
+
+<script is:inline>
+  const footerLogo = document.getElementById("footer-logo");
+
+  function updateTheme() {
+    const theme = localStorage.getItem("theme");
+
+    if (theme === "dark") {
+      footerLogo.src = "/assets/logo-alt.png";
+    } else {
+      footerLogo.src = "/assets/logo.png";
+    }
+  }
+
+  // Initial update based on the theme
+  updateTheme();
+
+  // Listen for theme change event
+  window.addEventListener("themeChange", updateTheme);
+</script>