53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
|
|
import { ThemeProvider, CssBaseline } from '@mui/material';
|
|
import { getTheme } from './SteamTheme';
|
|
import type { ThemeType } from './SteamTheme';
|
|
|
|
interface ThemeContextType {
|
|
currentTheme: ThemeType;
|
|
setTheme: (theme: ThemeType) => void;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
export const AppThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [currentTheme, setCurrentTheme] = useState<ThemeType>('steam');
|
|
|
|
useEffect(() => {
|
|
// Load theme from store on startup
|
|
const loadTheme = async () => {
|
|
const api = (window as any).electronAPI;
|
|
if (api?.getServerConfig) {
|
|
const config = await api.getServerConfig();
|
|
if (config?.theme) setCurrentTheme(config.theme);
|
|
}
|
|
};
|
|
loadTheme();
|
|
}, []);
|
|
|
|
const setTheme = async (theme: ThemeType) => {
|
|
setCurrentTheme(theme);
|
|
const api = (window as any).electronAPI;
|
|
if (api?.updateServerConfig) {
|
|
await api.updateServerConfig({ theme });
|
|
}
|
|
};
|
|
|
|
const theme = useMemo(() => getTheme(currentTheme), [currentTheme]);
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ currentTheme, setTheme }}>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
{children}
|
|
</ThemeProvider>
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useAppTheme = () => {
|
|
const context = useContext(ThemeContext);
|
|
if (!context) throw new Error('useAppTheme must be used within AppThemeProvider');
|
|
return context;
|
|
};
|