using the global state for theme

Author: Abhi0049k

src/components/Navbar.jsx

@@ -2,19 +2,15 @@ import React, { useEffect, useState } from 'react';
 import logo from '@/assets/images/logo.png';
 import { Link, useNavigate } from 'react-router-dom';
 import courses from '@/data/courseData';
+import { useTheme } from '@/context/ThemeContext';
+
 
 function Navbar({ loggedin }) {
   const [searchTerm, setSearchTerm] = useState('');
   const [suggestions, setSuggestions] = useState([]);
-  const [theme, setTheme] = useState('light');
+  const { theme, toggleTheme } = useTheme();
   const navigate = useNavigate();
 
-  const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTheme(newTheme);
-    document.body.setAttribute('data-bs-theme', newTheme)
-  };
-
   const handleSearchChange = (event) => {
     const searchInput = event.target.value;
     setSearchTerm(searchInput);
@@ -45,11 +41,6 @@ function Navbar({ loggedin }) {
     setSuggestions([]);
   };
 
-  useEffect(() => {
-    document.body.setAttribute('data-bs-theme', theme);
-  }, []);
-
-
   return (
     <nav className={`navbar navbar-expand-lg sticky-top bg-body-tertiary navbar-${theme}`}>
       <div className="container-fluid">

src/context/ThemeContext.jsx

@@ -6,7 +6,9 @@ export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState('light');
 
   const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    document.body.setAttribute('data-bs-theme', newTheme);
   };
 
   return (

src/main.jsx

@@ -4,9 +4,12 @@ import App from './App.jsx';
 import './styles/index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import { ThemeProvider } from './context/ThemeContext.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>
 );