From e277df27024405aeff741cdb0c71223d81e23cc8 Mon Sep 17 00:00:00 2001
From: vivekgotstack <vivekni1224@gmail.com>
Date: Fri, 12 Sep 2025 23:55:45 +0530
Subject: [PATCH] Theme added to local storage

---
 src/App.css                   |  4 ++--
 src/contexts/ThemeContext.tsx | 21 ++++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/App.css b/src/App.css
index 3442186..2507ccd 100644
--- a/src/App.css
+++ b/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{
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index bc9d8aa..c70cb0d 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/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 };