From 549e8ccd69cdc52894faebf4857ec0f32596b443 Mon Sep 17 00:00:00 2001
From: SUNNY KUMAR <sunnykumar23232@gmail.com>
Date: Tue, 17 Oct 2023 11:03:46 +0530
Subject: [PATCH 1/3] feat(dark-mode): preserved dark mode state using local
 storage

---
 client/src/context/ThemeContext.jsx | 32 +++++++++++++++++++++--------
 client/src/hooks/useLocalStorage.js | 26 +++++++++++++++++++++++
 2 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 client/src/hooks/useLocalStorage.js

diff --git a/client/src/context/ThemeContext.jsx b/client/src/context/ThemeContext.jsx
index 9836cef1..5f8a9453 100644
--- a/client/src/context/ThemeContext.jsx
+++ b/client/src/context/ThemeContext.jsx
@@ -1,10 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
-
 import { ThemeProvider } from '@mui/material/styles';
-
 import darkTheme from '../config/themes/dark';
 import lightTheme from '../config/themes/light';
-
+import useLocalStorage from '../hooks/useLocalStorage';
 //context for theming
 export const ThemeContext = React.createContext({
   isDarkTheme: undefined,
@@ -15,12 +13,30 @@ export const useTheme = () => useContext(ThemeContext);
 
 //context provider
 const ThemeContextProvider = ({ children }) => {
-  const [isDarkTheme, setDarkTheme] = useState(false);
-
+  const [defaultTheme, setDefaultTheme] = useLocalStorage('DefaultTheme');
+  const [isDarkTheme, setDarkTheme] = useLocalStorage('IsDarkTheme');
+  useEffect(() => {}, [isDarkTheme]);
   useEffect(() => {
-    const currentHour = new Date().getHours();
-    setDarkTheme(currentHour >= 20 || currentHour <= 8 ? true : false);
-  }, [setDarkTheme]);
+    const darkModeMediaQuery = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    );
+    const setTheme = (event) => {
+      if (event.matches) {
+        setDefaultTheme(defaultTheme === true ? defaultTheme : null);
+        setDarkTheme(true);
+      } else {
+        setDefaultTheme(false);
+        setDarkTheme(defaultTheme === false ? defaultTheme : null);
+      }
+    };
+    setTheme(darkModeMediaQuery);
+    darkModeMediaQuery.addEventListener('change', setTheme);
+    setDarkTheme(isDarkTheme);
+    setDefaultTheme(isDarkTheme ? isDarkTheme : isDarkTheme);
+    return () => {
+      darkModeMediaQuery.removeEventListener('change', setTheme);
+    };
+  }, [isDarkTheme]);
 
   return (
     <ThemeContext.Provider value={{ isDarkTheme, setDarkTheme }}>
diff --git a/client/src/hooks/useLocalStorage.js b/client/src/hooks/useLocalStorage.js
new file mode 100644
index 00000000..52041afa
--- /dev/null
+++ b/client/src/hooks/useLocalStorage.js
@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+const useLocalStorage = (key, initialValue) => {
+  const [state, setState] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(key);
+      return value != 'null' ? JSON.parse(value) : initialValue;
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(state) : value;
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      setState(value);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return [state, setValue];
+};
+
+export default useLocalStorage;
\ No newline at end of file

From f4525cc43d04109f341bf7b8d5f57c8e43bec790 Mon Sep 17 00:00:00 2001
From: SUNNY KUMAR <123469525+SUNNYKUMAR1232@users.noreply.github.com>
Date: Sat, 21 Oct 2023 15:18:32 +0530
Subject: [PATCH 2/3] Update ThemeContext.jsx

---
 client/src/context/ThemeContext.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/context/ThemeContext.jsx b/client/src/context/ThemeContext.jsx
index 5f8a9453..faece552 100644
--- a/client/src/context/ThemeContext.jsx
+++ b/client/src/context/ThemeContext.jsx
@@ -15,7 +15,6 @@ export const useTheme = () => useContext(ThemeContext);
 const ThemeContextProvider = ({ children }) => {
   const [defaultTheme, setDefaultTheme] = useLocalStorage('DefaultTheme');
   const [isDarkTheme, setDarkTheme] = useLocalStorage('IsDarkTheme');
-  useEffect(() => {}, [isDarkTheme]);
   useEffect(() => {
     const darkModeMediaQuery = window.matchMedia(
       '(prefers-color-scheme: dark)',

From aeb773e9cca191a6132615658848f3988724c4e8 Mon Sep 17 00:00:00 2001
From: SUNNY KUMAR <123469525+SUNNYKUMAR1232@users.noreply.github.com>
Date: Sat, 21 Oct 2023 15:19:50 +0530
Subject: [PATCH 3/3] Update useLocalStorage.js

---
 client/src/hooks/useLocalStorage.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/src/hooks/useLocalStorage.js b/client/src/hooks/useLocalStorage.js
index 52041afa..17ea83b0 100644
--- a/client/src/hooks/useLocalStorage.js
+++ b/client/src/hooks/useLocalStorage.js
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-
 const useLocalStorage = (key, initialValue) => {
   const [state, setState] = useState(() => {
     try {
@@ -9,7 +8,6 @@ const useLocalStorage = (key, initialValue) => {
       console.log(error);
     }
   });
-
   const setValue = (value) => {
     try {
       const valueToStore = value instanceof Function ? value(state) : value;
@@ -19,8 +17,6 @@ const useLocalStorage = (key, initialValue) => {
       console.log(error);
     }
   };
-
   return [state, setValue];
 };
-
-export default useLocalStorage;
\ No newline at end of file
+export default useLocalStorage;