init

frontend/src/theme/ThemeContext.tsx

@@ -0,0 +1,52 @@
+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;
+};