From 8ecb6f736d17584f8dc782895c26df6720ea9cdb Mon Sep 17 00:00:00 2001
From: aniket05singh <aniket052005@gmail.com>
Date: Fri, 10 Jan 2025 13:10:24 +0530
Subject: [PATCH] Dark Light Mode Button Added

---
 package-lock.json          | 15 +++++------
 src/componets/DarkLight.js | 51 ++++++++++++++++++++++++++++++++++++++
 src/componets/Navbar.js    |  2 ++
 3 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 src/componets/DarkLight.js

diff --git a/package-lock.json b/package-lock.json
index 2fc443c..d0be73b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17873,16 +17873,17 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
@@ -31822,9 +31823,9 @@
       }
     },
     "typescript": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true
     },
     "unbox-primitive": {
diff --git a/src/componets/DarkLight.js b/src/componets/DarkLight.js
new file mode 100644
index 0000000..41d0e23
--- /dev/null
+++ b/src/componets/DarkLight.js
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+
+const DarkLightModeToggle = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Check if the user has a saved theme preference in localStorage
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme) {
+      setIsDarkMode(savedTheme === "dark");
+    } else {
+      // Default to system preference
+      const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+      setIsDarkMode(prefersDarkScheme.matches);
+    }
+
+    // Listen for changes to system theme preference
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+    prefersDarkScheme.addEventListener("change", (e) => {
+      if (!localStorage.getItem("theme")) { // Only change if user hasn't set a preference
+        setIsDarkMode(e.matches);
+      }
+    });
+  }, []);
+
+  const toggleMode = () => {
+    setIsDarkMode((prevMode) => {
+      const newMode = !prevMode;
+      localStorage.setItem("theme", newMode ? "dark" : "light");
+      return newMode;
+    });
+  };
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.body.classList.add("dark-mode");
+      document.body.classList.remove("light-mode");
+    } else {
+      document.body.classList.add("light-mode");
+      document.body.classList.remove("dark-mode");
+    }
+  }, [isDarkMode]);
+
+  return (
+    <button onClick={toggleMode} style={{ color: '#deb887' }}>
+      {isDarkMode ? "🌙 Dark" : "🌞 Light"}
+    </button>
+  );
+};
+
+export default DarkLightModeToggle;
diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js
index 8f3646e..d82bc45 100644
--- a/src/componets/Navbar.js
+++ b/src/componets/Navbar.js
@@ -11,6 +11,7 @@ import {
   UsLoginDropdown,
   UsLogoutDropdown,
 } from "./Dropdown";
+import DarkLightModeToggle from "./DarkLight";
 
 const NavbarContainer = styled(motion.nav)`
   display: flex;
@@ -460,6 +461,7 @@ function Navbar() {
             >
               {isOpen ? "×" : "☰"}
             </MobileMenuButton>
+            <DarkLightModeToggle/>
           </RightNav>
         </ul>
       </NavbarContainer>