Theme added to local storage

src/App.css

@@ -23,12 +23,12 @@
 }
 
 .active-page{
-  border-bottom: 2px solid blue;
+  border-bottom: 2px solid rgb(73, 102, 217);
   transition: 100ms ease;
 }
 
 .pages h1::first-letter{
-  color:rgb(89, 89, 200);
+  color:rgb(73, 102, 217);
 }
 
 body{

src/contexts/ThemeContext.tsx

@@ -1,19 +1,26 @@
-import { createContext, useState, type ReactNode } from "react";
+import { createContext, useState, type ReactNode, useEffect } from "react";
 
-interface ThemeTypes {
-  theme: "light" | "dark";
+interface Themes {
+  theme: string;
   toggleTheme: () => void;
 }
+const ThemeContext = createContext<Themes | null>(null);
 
-export const ThemeContext = createContext<null | ThemeTypes>(null);
+function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
 
-export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<"light" | "dark">("light");
-  const toggleTheme = () =>
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
     setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
       {children}
     </ThemeContext.Provider>
   );
 }
+export { ThemeContext, ThemeProvider };