+
)}
diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index 23d097c..51553ec 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -1,6 +1,6 @@
'use client'
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import {
@@ -21,7 +21,9 @@ import {
HomeIcon,
UserCircleIcon,
XMarkIcon,
- ArrowRightOnRectangleIcon
+ ArrowRightOnRectangleIcon,
+ MoonIcon,
+ SunIcon
} from '@heroicons/react/24/outline'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import useAuthStore from '../../store/authStore';
@@ -51,6 +53,7 @@ const products = [
export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [isDark, setIsDark] = useState(false)
const user = useAuthStore((s) => s.user);
const logout = useAuthStore((s) => s.logout);
const router = useRouter();
@@ -79,8 +82,34 @@ export default function Header() {
return 'U';
};
+ // Theme initialization & persistence
+ useEffect(() => {
+ const stored = localStorage.getItem('theme')
+ if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+ document.documentElement.classList.add('dark')
+ setIsDark(true)
+ } else {
+ document.documentElement.classList.remove('dark')
+ setIsDark(false)
+ }
+ }, [])
+
+ const toggleTheme = useCallback(() => {
+ setIsDark(prev => {
+ const next = !prev
+ if (next) {
+ document.documentElement.classList.add('dark')
+ localStorage.setItem('theme', 'dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ localStorage.setItem('theme', 'light')
+ }
+ return next
+ })
+ }, [])
+
return (
-
+
+
+