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 (
-
- {children}
+
+
+ {/* Set theme before React hydration to prevent FOUC */}
+
+ {children}
+
);
}
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() {
+ {/* Theme toggle allows users to switch light/dark mode */}
+
{user === null && (
router.push('/sign')}>Login
)}
@@ -99,6 +102,8 @@ export function NavbarDemo() {
Login
)}
+ {/* Mobile theme toggle */}
+
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 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 (
+
+ );
+}