used Recoil for toggletheme

package.json

@@ -32,7 +32,8 @@
     "react-router-dom": "^6.27.0",
     "react-spinners": "^0.14.1",
     "react-top-loading-bar": "^2.3.1",
-    "react-typed": "^2.0.12"
+    "react-typed": "^2.0.12",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.jsx

@@ -27,9 +27,14 @@ import "./App.css";
 import AnimatedCursor from "react-animated-cursor";
 
 import { FaAngleDoubleUp } from "react-icons/fa";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { themeState } from "./atoms/ThemeAtom";
+import { toggleThemeSelector } from "./atoms/ThemeAtom";
 
 function App() {
-  const { progress, isDarkMode } = useContext(Context); // Assuming isDarkMode is provided in your context
+  const { progress} = useContext(Context);
+  const isDarkMode = useRecoilValue(themeState); //to use the current theme 
+  const toggleTheme = useSetRecoilState(toggleThemeSelector); //to update the state  
 
   const [showScroll, setShowScroll] = useState(false);
 
@@ -66,6 +71,11 @@ function App() {
     document.body.classList.toggle("dark", isDarkMode);
   }, [isDarkMode]);
 
+  // useEffect(() => {
+  //   // Add or remove the "dark" class on the body based on isDarkMode
+  //   document.body.classList.toggle("dark", isDarkMode);
+  // }, [isDarkMode]);
+
   return (
     <div className={`d-flex flex-column ${isDarkMode ? "dark" : ""}`}>
       <AnimatedCursor

src/atoms/ThemeAtom

@@ -0,0 +1,28 @@
+import { atom, selector } from 'recoil';
+
+const getInitialDarkMode = () => {
+  const savedMode = localStorage.getItem('darkMode');
+  return savedMode === 'true'; // Convert saved string back to boolean
+};
+
+export const themeState = atom({
+  key: 'themeState',
+  default: getInitialDarkMode(), // Use the initial value from localStorage
+  effects_UNSTABLE: [
+    ({ onSet }) => {
+      onSet((newMode) => {
+        localStorage.setItem('darkMode', newMode.toString()); // Store as string
+      });
+    },
+  ],
+});
+
+// Selector to toggle theme
+export const toggleThemeSelector = selector({
+  key: 'toggleThemeSelector',
+  get: ({ get }) => get(themeState),
+  set: ({ get, set }) => {
+    const currentMode = get(themeState);
+    set(themeState, !currentMode); // Toggle the theme
+  },
+});

src/components/shared/Footer.jsx

@@ -19,9 +19,11 @@ import Tilt from "react-parallax-tilt";
 import "../../css/Footer.css";
 import { TbHelpSquareFilled } from "react-icons/tb";
 import GoogleTranslate from "../../pages/contributor/GoogleTranslate";
+import { themeState } from "../../atoms/ThemeAtom";
+import { useRecoilValue } from "recoil";
 
 const Footer = () => {
-  const { isDarkMode } = useContext(Context);
+  const isDarkMode = useRecoilValue(themeState); //to use the current theme 
 
   return (
     <footer

src/components/shared/Navbar.jsx

@@ -3,9 +3,13 @@ import { Link } from "react-router-dom";
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
 import { Context } from "../../context/Context";
 import '../shared/Navbar.css';
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { themeState } from "../../atoms/ThemeAtom";
+import { toggleThemeSelector } from "../../atoms/ThemeAtom";
 
 const Navbar = () => {
-  const { isDarkMode, toggleTheme } = useContext(Context);
+  const isDarkMode = useRecoilValue(themeState); //to use the current theme 
+  const toggleTheme = useSetRecoilState(toggleThemeSelector); //to update the state  
   const [isSticky, setIsSticky] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(true);
 

src/context/Context.jsx

@@ -3,27 +3,11 @@ import React, { createContext, useState, useEffect } from 'react';
 export const Context = createContext();
 
 const ContextProvider = ({ children }) => {
-  const getInitialDarkMode = () => localStorage.getItem('darkMode') === 'true';
-
   const [progress, setProgress] = useState(0);
-  const [isDarkMode, setDarkMode] = useState(getInitialDarkMode);
-
-  useEffect(() => {
-    localStorage.setItem('darkMode', isDarkMode);
-  }, [isDarkMode]);
-
-  const toggleTheme = () => {
-    setDarkMode((prevMode) => {
-      const newMode = !prevMode;
-      localStorage.setItem('darkMode', newMode ? 'dark' : 'light');
-      return newMode;
-    });
-  };
 
   return (
     <Context.Provider value={{
       progress, setProgress,
-      isDarkMode, toggleTheme,
     }}>
       {children}
     </Context.Provider>

src/main.jsx

@@ -5,11 +5,14 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import 'bootstrap/dist/js/bootstrap.bundle.min';
 import "./index.css"
 import ContextProvider from "./context/Context";
+import { RecoilRoot } from "recoil";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <ContextProvider>
-      <App />
+      <RecoilRoot>
+        <App />
+      </RecoilRoot>
     </ContextProvider>
   </React.StrictMode>,
 );

src/pages/About.jsx

@@ -1,9 +1,11 @@
 import React, { useContext } from 'react';
 import { BiCalendar, BiMap, BiUser, BiBook, BiBriefcase, BiWorld, BiCalendarX } from 'react-icons/bi';
 import { Context } from '../context/Context'; // Assuming your context file is located here
+import { themeState } from '../atoms/ThemeAtom';
+import { useRecoilValue } from 'recoil';
 
 const About = () => {
-  const { isDarkMode } = useContext(Context);
+  const isDarkMode = useRecoilValue(themeState); //to use the current theme 
 
   return (
     <div className={`container p-4 ${isDarkMode ? 'text-white' : 'text-dark'}`} style={{ backgroundColor: isDarkMode ? '#333' : 'rgba(228, 193, 129, 0.272);' }}>

src/pages/Home.jsx

@@ -3,9 +3,11 @@ import { ReactTyped } from "react-typed";
 import VideoButton from "../components/Home/VideoButton";
 import Tilt from 'react-parallax-tilt';
 import { Context } from '../context/Context';
+import { themeState } from "../atoms/ThemeAtom";
+import { useRecoilValue } from "recoil";
 
 export default function Home() {
-  const { isDarkMode } = useContext(Context);
+  const isDarkMode = useRecoilValue(themeState); //to use the current theme 
 
   return (
     <div className={`d-flex flex-column align-items-center ${isDarkMode ? 'dark-mode' : 'light-mode'}`} style={{ color: isDarkMode ? 'white' : 'black' }}>