1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React, {
createContext,
useContext,
useEffect,
useState,
type ReactNode,
} from "react";
import { themes, type Theme, type ThemeName } from "./themes";
interface ThemeContextType {
theme: Theme;
themeName: ThemeName;
setTheme: (name: ThemeName) => void;
availableThemes: ThemeName[];
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
interface ThemeProviderProps {
children: ReactNode;
defaultTheme?: ThemeName;
}
export const ThemeProvider: React.FC<ThemeProviderProps> = ({
children,
defaultTheme = "light",
}) => {
const [themeName, setThemeName] = useState<ThemeName>(() => {
const savedTheme = localStorage.getItem("theme") as ThemeName;
if (savedTheme && themes[savedTheme]) {
return savedTheme;
}
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
return "dark";
}
return defaultTheme;
});
const theme = themes[themeName];
useEffect(() => {
const root = document.documentElement;
root.setAttribute("data-theme", themeName);
// Set color variables
Object.entries(theme.colors).forEach(([key, value]) => {
const cssVarName = `--color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
root.style.setProperty(cssVarName, value);
});
// Set typography variables
Object.entries(theme.typography).forEach(([key, value]) => {
const cssVarName = `--${key
.replace(/([A-Z])/g, "-$1")
.toLowerCase()
.replace("font-", "font-")
.replace("size", "")
.replace("weight", "")}`;
root.style.setProperty(cssVarName, value);
});
// Set spacing variables
Object.entries(theme.spacing).forEach(([key, value]) => {
const cssVarName = `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
root.style.setProperty(cssVarName, value);
});
// Set radius variables
Object.entries(theme.radius).forEach(([key, value]) => {
const cssVarName = `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
root.style.setProperty(cssVarName, value);
});
// Set transition variables
Object.entries(theme.transitions).forEach(([key, value]) => {
const cssVarName = `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
root.style.setProperty(cssVarName, value);
});
// Legacy variables for backward compatibility
root.style.setProperty("--text-color", theme.colors.text);
root.style.setProperty("--background-color", theme.colors.background);
localStorage.setItem("theme", themeName);
}, [themeName, theme]);
useEffect(() => {
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const handleChange = (e: MediaQueryListEvent) => {
const savedTheme = localStorage.getItem("theme");
if (!savedTheme) {
setThemeName(e.matches ? "dark" : "light");
}
};
mediaQuery.addEventListener("change", handleChange);
return () => mediaQuery.removeEventListener("change", handleChange);
}, []);
const setTheme = (name: ThemeName) => {
if (themes[name]) {
setThemeName(name);
}
};
const value: ThemeContextType = {
theme,
themeName,
setTheme,
availableThemes: Object.keys(themes) as ThemeName[],
};
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
};
export const useTheme = (): ThemeContextType => {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
};
|
