@jhustle44 / jcr-guide-pro
Code Commits Issues Pulls Cloud Agent CI/CD
master
copilot/add-firebase copilot/change-app-name-to-jcrguru copilot/create-zip-file copilot/create-zip-file-again copilot/merge-any-updates main master
tsx 73 lines 1.59 KB
Raw
1 import { createContext, useContext, useEffect, useState } from "react";
2
3 type Theme = "dark" | "light" | "amoled" | "system";
4
5 type ThemeProviderProps = {
6 children: React.ReactNode;
7 defaultTheme?: Theme;
8 storageKey?: string;
9 };
10
11 type ThemeProviderState = {
12 theme: Theme;
13 setTheme: (theme: Theme) => void;
14 };
15
16 const initialState: ThemeProviderState = {
17 theme: "system",
18 setTheme: () => null,
19 };
20
21 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
22
23 export function ThemeProvider({
24 children,
25 defaultTheme = "system",
26 storageKey = "jcr-guide-theme",
27 ...props
28 }: ThemeProviderProps) {
29 const [theme, setTheme] = useState<Theme>(
30 () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
31 );
32
33 useEffect(() => {
34 const root = window.document.documentElement;
35
36 root.classList.remove("light", "dark", "amoled");
37
38 if (theme === "system") {
39 const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
40 .matches
41 ? "dark"
42 : "light";
43
44 root.classList.add(systemTheme);
45 return;
46 }
47
48 root.classList.add(theme);
49 }, [theme]);
50
51 const value = {
52 theme,
53 setTheme: (theme: Theme) => {
54 localStorage.setItem(storageKey, theme);
55 setTheme(theme);
56 },
57 };
58
59 return (
60 <ThemeProviderContext.Provider {...props} value={value}>
61 {children}
62 </ThemeProviderContext.Provider>
63 );
64 }
65
66 export const useTheme = () => {
67 const context = useContext(ThemeProviderContext);
68
69 if (context === undefined)
70 throw new Error("useTheme must be used within a ThemeProvider");
71
72 return context;
73 };