ADD new frontend

frontend/src/contexts/ThemeContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext } from 'react';
+import { useUIStore } from '../stores/ui.store';
+
+interface ThemeContextType {
+  theme: 'light' | 'dark' | 'auto';
+  setTheme: (theme: 'light' | 'dark' | 'auto') => void;
+  resolvedTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { theme, setTheme } = useUIStore();
+  
+  // Calculate resolved theme based on current theme and system preference
+  const getResolvedTheme = (): 'light' | 'dark' => {
+    if (theme === 'auto') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return theme as 'light' | 'dark';
+  };
+
+  const contextValue: ThemeContextType = {
+    theme,
+    setTheme,
+    resolvedTheme: getResolvedTheme(),
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};