diff --git a/frontend/src/Components/Navbar.jsx b/frontend/src/Components/Navbar.jsx index 3ae21844..c91d2e9b 100644 --- a/frontend/src/Components/Navbar.jsx +++ b/frontend/src/Components/Navbar.jsx @@ -8,6 +8,8 @@ import { faBell, faBars, faTimes, + faSun, + faMoon, } from "@fortawesome/free-solid-svg-icons"; import axios from "axios"; @@ -19,6 +21,30 @@ const Navbar = () => { const [isSticky, setIsSticky] = useState(false); const [menuOpen, setMenuOpen] = useState(false); + // Add dark mode state + const [isDark, setIsDark] = useState(() => { + if (typeof window !== 'undefined') { + const savedMode = localStorage.getItem('darkMode'); + if (savedMode !== null) { + return JSON.parse(savedMode); + } + return window.matchMedia('(prefers-color-scheme: dark)').matches; + } + return false; + }); + + // Add dark mode effect + useEffect(() => { + if (isDark) { + document.documentElement.classList.add('dark'); + document.body.style.backgroundColor = '#1a1a1a'; + } else { + document.documentElement.classList.remove('dark'); + document.body.style.backgroundColor = '#ffffff'; + } + localStorage.setItem('darkMode', JSON.stringify(isDark)); + }, [isDark]); + useEffect(() => { let token = localStorage.getItem("tastytoken"); if (token) { @@ -67,13 +93,18 @@ const Navbar = () => { setMenuOpen(false); }; + // Add dark mode toggle function + const toggleDark = () => { + setIsDark(!isDark); + }; + return (