First commit of dark mode project

package.json

@@ -7,7 +7,8 @@
   "dependencies": {
     "axios": "0.19.0",
     "moment": "2.24.0",
-    "react": "16.8.6",
+    "node-sass": "^4.12.0",
+    "react": "^16.9.0",
     "react-dom": "16.8.6",
     "react-scripts": "3.0.1",
     "recharts": "1.6.2"
@@ -27,4 +28,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

src/components/Navbar.jsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
+import { useDarkMode } from '../hooks/useDarkMode';
+
 
 const Navbar = () => {
-  const [darkMode, setDarkMode] = useState(false);
+  // const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode();
   const toggleMode = e => {
     e.preventDefault();
     setDarkMode(!darkMode);

src/hooks/useDarkMode.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useLocalStorage } from './useLocalStorage';
+
+export const useDarkMode = () => {
+    const [darkMode, setDarkMode] = useLocalStorage('dark', false);
+
+    useEffect(() => {
+        console.log('dark mode: ', darkMode);
+        if(darkMode === true){
+            window.document.body.classList.add('dark-mode');
+        } else {
+            window.document.body.classList.remove('dark-mode');
+        }}, [darkMode])
+
+        return[darkMode, setDarkMode];
+
+}
+

src/hooks/useLocalStorage.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export const useLocalStorage = (key, initialValue) => {
+
+    const [storedValue, setStoredValue] = useState(() => {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+    });
+    const setValue = value => {
+        setStoredValue(value);
+        window.localStorage.setItem(key, JSON.stringify(value));
+    };
+
+    return [storedValue, setStoredValue];
+}