+
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
index b9f3789..e133582 100644
--- a/src/components/Navbar/Navbar.css
+++ b/src/components/Navbar/Navbar.css
@@ -75,6 +75,7 @@ nav .nav-buttons {
gap: 10px;
}
+
@media screen and (max-width: 950px) {
nav {
padding: 5px 5px;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 6967413..49f0aa2 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,6 +1,10 @@
import React, { useState, useEffect } from "react";
import { NavLink, useLocation } from "react-router-dom";
import "./Navbar.css";
+import logofordark from '../../assets/logofordark.png'
+import logoforlight from '../../assets/logoforlight.png'
+import { MdLightMode } from "react-icons/md";
+import { MdDarkMode } from "react-icons/md";
const Navbar = () => {
const [navlinksvalue, setnavlinks] = useState("nav-links");
@@ -22,12 +26,38 @@ const Navbar = () => {
}
};
+ // FOR DARK MODE
+ const [theme, setTheme] = useState(null);
+
+ useEffect(() => {
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ setTheme('light'); // Set to 'light' if preferred color scheme is dark
+ } else {
+ setTheme('dark'); // Set to 'dark' if preferred color scheme is light or not specified
+ }
+
+ }, [])
+
+ useEffect(() =>{
+ if (theme === "dark") {
+ document.documentElement.classList.add("dark");
+ } else {
+ document.documentElement.classList.remove("dark");
+ }
+
+ }, [theme])
+
+ const handleThemeSwitch = () => {
+ setTheme(theme === "dark"? "light" : "dark");
+ };
+ // FOR DARK MODE
+
return (
<>
-