From 4833115def5e4be3f79ffc865df8f6edcf0efc40 Mon Sep 17 00:00:00 2001
From: karrisujana <sujanakarri01@gmail.com>
Date: Sat, 23 May 2026 14:32:40 +0530
Subject: [PATCH] Add dark mode support across website

---
 src/app/globals.css       | 11 ++++++++++-
 src/components/Footer.tsx |  2 +-
 src/components/Navbar.tsx | 32 ++++++++++++++++++++++++++++++--
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 9bacd25..90990ec 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,6 +12,15 @@
   --radius: 12px;
 }
 
+.dark {
+  --background: #0f172a;
+  --foreground: #f8fafc;
+  --surface: #1e293b;
+  --surface-hover: #334155;
+  --border: #334155;
+  --muted: #94a3b8;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -42,7 +51,7 @@ a {
   position: sticky;
   top: 0;
   z-index: 100;
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--surface);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index bfabefe..b6fc2ec 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -13,7 +13,7 @@ export default function Footer() {
             height={36}
             quality={100}
             unoptimized
-            style={{ mixBlendMode: "multiply", borderRadius: 6 }}
+            style={{borderRadius: 6, backgroundColor: "white", padding: "2px",}}
           />
           <span>WebPath</span>
           <p className="footer-tagline">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2cb2968..37b231f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
 
@@ -5,6 +7,7 @@ export default function Navbar() {
   return (
     <nav className="navbar">
       <div className="navbar-inner">
+
         <Link href="/" className="navbar-brand">
           <Image
             src="/sjapathwaylogo.png"
@@ -13,13 +16,22 @@ export default function Navbar() {
             height={40}
             quality={100}
             unoptimized
-            style={{ mixBlendMode: "multiply", borderRadius: 6 }}
+            style={{
+              borderRadius: 6,
+              backgroundColor: "white",
+              padding: "2px",
+            }}
           />
+
           <span className="brand-text">WebPath</span>
         </Link>
+
         <div className="navbar-links">
+
           <Link href="/paths">Paths</Link>
+
           <Link href="/contribute">Contribute</Link>
+
           <a
             href="https://github.com/sja-thedude/WebPath"
             target="_blank"
@@ -27,8 +39,24 @@ export default function Navbar() {
           >
             GitHub
           </a>
+
+          <button
+            className="nav-link"
+            onClick={() => {
+              document.documentElement.classList.toggle("dark");
+
+              localStorage.theme =
+                document.documentElement.classList.contains("dark")
+                  ? "dark"
+                  : "light";
+            }}
+            aria-label="Toggle Dark Mode"
+          >
+            🌙
+          </button>
+
         </div>
       </div>
     </nav>
   );
-}
+}
\ No newline at end of file