From 23d728c2f94c1ae79d17a269bae95e2bdbef8c21 Mon Sep 17 00:00:00 2001
From: MohanPrasathSece <mohanprasath.s2023ece@sece.ac.in>
Date: Fri, 10 Oct 2025 13:52:22 +0530
Subject: [PATCH] theme toggle added

---
 src/app/layout.tsx              | 23 ++++++++++++++--
 src/components/nav.tsx          |  5 ++++
 src/components/theme-toggle.tsx | 48 +++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/components/theme-toggle.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3314e47..f8d34b2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,8 +15,27 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        {/* Set theme before React hydration to prevent FOUC */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            (function() {
+              try {
+                var stored = localStorage.getItem('theme');
+                var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                var theme = stored || (prefersDark ? 'dark' : 'light');
+                var root = document.documentElement;
+                if (theme === 'dark') root.classList.add('dark');
+                else root.classList.remove('dark');
+              } catch (e) {}
+            })();
+          `,
+          }}
+        />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index a3725d5..bcdc022 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -14,6 +14,7 @@ import { useState, useEffect } from "react";
 import { GitHubStarsButton } from '@/components/animate-ui/buttons/github-stars';
 import { useRouter } from "next/navigation";
 import { supabase } from "@/lib/supabaseclient";
+import ThemeToggle from "@/components/theme-toggle";
 
 export function NavbarDemo() {
   const navItems = [
@@ -59,6 +60,8 @@ export function NavbarDemo() {
           <NavItems items={navItems} />
           <div className="flex items-center gap-4">
             <GitHubStarsButton username="kris70lesgo" repo="s1" />
+            {/* Theme toggle allows users to switch light/dark mode */}
+            <ThemeToggle />
             {user === null && (
               <NavbarButton variant="secondary" onClick={() => router.push('/sign')}>Login</NavbarButton>
             )}
@@ -99,6 +102,8 @@ export function NavbarDemo() {
                   Login
                 </NavbarButton>
               )}
+              {/* Mobile theme toggle */}
+              <ThemeToggle />
             </div>
           </MobileNavMenu>
         </MobileNav>
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..af1b0df
--- /dev/null
+++ b/src/components/theme-toggle.tsx
@@ -0,0 +1,48 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+// Simple theme toggler that updates the <html> class and persists preference
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  useEffect(() => {
+    // Initialize from current DOM (set by inline script) or system
+    const isDark = document.documentElement.classList.contains("dark");
+    setTheme(isDark ? "dark" : "light");
+  }, []);
+
+  const toggle = () => {
+    const next = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+
+    const root = document.documentElement;
+    if (next === "dark") root.classList.add("dark");
+    else root.classList.remove("dark");
+
+    try {
+      localStorage.setItem("theme", next);
+    } catch {}
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label="Toggle theme"
+      className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm hover:bg-secondary/60 dark:hover:bg-secondary/40 transition-colors"
+    >
+      {theme === "dark" ? (
+        <>
+          <Sun className="h-4 w-4" />
+          <span>Light</span>
+        </>
+      ) : (
+        <>
+          <Moon className="h-4 w-4" />
+          <span>Dark</span>
+        </>
+      )}
+    </button>
+  );
+}
