feat: init repo
This commit is contained in:
commit
e85d11b83d
40 changed files with 6839 additions and 0 deletions
104
src/contexts/ThemeContext.tsx
Normal file
104
src/contexts/ThemeContext.tsx
Normal file
|
@ -0,0 +1,104 @@
|
|||
import React, { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
const defineThemeColors = (isDark: boolean) => {
|
||||
const root = document.documentElement;
|
||||
if (isDark) {
|
||||
root.style.setProperty('--bg-primary', '#111827');
|
||||
root.style.setProperty('--bg-secondary', '#1f2937');
|
||||
root.style.setProperty('--text-primary', '#ffffff');
|
||||
root.style.setProperty('--text-secondary', '#9ca3af');
|
||||
root.style.setProperty('--accent-primary', '#60a5fa');
|
||||
root.style.setProperty('--accent-secondary', '#3b82f6');
|
||||
} else {
|
||||
root.style.setProperty('--bg-primary', '#ffffff');
|
||||
root.style.setProperty('--bg-secondary', '#f3f4f6');
|
||||
root.style.setProperty('--text-primary', '#111827');
|
||||
root.style.setProperty('--text-secondary', '#4b5563');
|
||||
root.style.setProperty('--accent-primary', '#2563eb');
|
||||
root.style.setProperty('--accent-secondary', '#3b82f6');
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化主题函数
|
||||
const initializeTheme = () => {
|
||||
const savedTheme = localStorage.getItem('theme') as Theme;
|
||||
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isDark = savedTheme === 'dark' || ((!savedTheme || savedTheme === 'system') && systemDark);
|
||||
|
||||
// 立即应用主题
|
||||
document.documentElement.classList.toggle('dark', isDark);
|
||||
defineThemeColors(isDark);
|
||||
|
||||
return {
|
||||
theme: savedTheme || 'system',
|
||||
isDark
|
||||
};
|
||||
};
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
// 使用初始化函数设置初始状态
|
||||
const initialTheme = useMemo(initializeTheme, []);
|
||||
const [theme, setTheme] = useState<Theme>(initialTheme.theme);
|
||||
const [isDark, setIsDark] = useState(initialTheme.isDark);
|
||||
|
||||
const updateTheme = useCallback((newTheme: Theme) => {
|
||||
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const nextIsDark = newTheme === 'dark' || (newTheme === 'system' && systemDark);
|
||||
|
||||
if (nextIsDark !== isDark) {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.toggle('dark', nextIsDark);
|
||||
defineThemeColors(nextIsDark);
|
||||
setIsDark(nextIsDark);
|
||||
});
|
||||
}
|
||||
}, [isDark]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('theme', theme);
|
||||
updateTheme(theme);
|
||||
}, [theme, updateTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const handler = () => {
|
||||
if (theme === 'system') {
|
||||
updateTheme('system');
|
||||
}
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener('change', handler);
|
||||
return () => mediaQuery.removeEventListener('change', handler);
|
||||
}, [theme, updateTheme]);
|
||||
|
||||
const contextValue = useMemo(() => ({
|
||||
theme,
|
||||
setTheme,
|
||||
isDark
|
||||
}), [theme, isDark]);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={contextValue}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue