Add ThemeProvider.

src/Pages/BasicPage.js

@@ -1,17 +1,16 @@
 import React, {useState, useEffect} from 'react';
 import parse from 'html-react-parser'
+import { useTheme } from '../ThemeContext';
 
 // import ScrollSpy from '../UI/ScrollSpy';
 
 const BasicPage = (props) => {
-  const [theme, setTheme] = useState(
-    localStorage.getItem('theme') || 'light'
-  );
-
     const [error, setError] = useState(null);
     const [isLoaded, setIsLoaded] = useState(false);
     const [items, setItems] = useState([]);
 
+    const { theme } = useTheme();
+
     useEffect(() => {
         fetch("http://localhost:5218/page/" + props.id)
           .then(res => res.json())

src/ThemeContext.js

@@ -0,0 +1,20 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(
+    localStorage.getItem('theme') || 'dark'
+    // document.body.className = theme;
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

src/UI/Footer.js

@@ -1,17 +1,10 @@
-import React, {useEffect, useState} from 'react';
-
+import React from 'react';
+import { useTheme } from '../ThemeContext';
 import './Footer.css';
 
 
-const Footer = (props) => {
-    const [theme, setTheme] = useState(
-        localStorage.getItem('theme') || 'light'
-    );
-
-    useEffect(() => {
-        localStorage.setItem('theme', theme);
-        document.body.className = theme;
-      }, [theme]);
+const Footer = () => {
+    const { theme } = useTheme();
 
     return (
         <footer className={`bg-${theme} text-center text-lg-start text-${theme}`}>

src/UI/Navigation.js

@@ -1,5 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 import {Link} from 'react-router-dom';
+import { useTheme } from '../ThemeContext';
 
 import './Navigation.css';
 
@@ -8,16 +9,7 @@ let section = window.location.pathname.split('/')[2];
 let chapter = window.location.pathname.split('/')[3];
 
 const Navigation = () => {
-    const [theme, setTheme] = useState(
-        localStorage.getItem('theme') || 'dark'
-      );
-
-    useEffect(() => {
-        localStorage.setItem('theme', theme);
-        document.body.className = theme;
-      }, [theme]);
-
-
+    const { theme, setTheme } = useTheme();
 
     const toggleTheme = () => {
         setTheme((theme === 'light') ? 'dark' : 'light');
@@ -60,7 +52,8 @@ const Navigation = () => {
                     </li>
                     }
                 </ul>
-                <button style={{display: 'none'}} onClick={toggleTheme} type="button" className={`btn btn-${theme}`}>Toggle Theme</button>
+                {/* style={{display: 'none'}}  */}
+                <button  onClick={toggleTheme} type="button" className={`btn btn-${theme}`}>Toggle Theme</button>
                 {/* <form className="d-flex" role="search">
                     <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
                     <button className="btn btn-outline-success" type="submit">Search</button>

src/index.js

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ThemeProvider } from './ThemeContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );