feat: update ThemeContext to use data-theme attribute, simplify to light/dark

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/contexts/ThemeContext.tsx

@@ -1,59 +1,40 @@
-import React, { useEffect, useState, type ReactNode } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 
-import { darkTheme, dimTheme, lightTheme, type ThemeMode } from '../types/theme';
+type Theme = 'light' | 'dark';
-import { ThemeContext } from './theme-context';
+interface ThemeContextValue {
-
+  theme: Theme;
-const STORAGE_KEY = 'app-theme-mode';
+  toggleTheme: () => void;
-
-function getInitialMode(): ThemeMode {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === 'dark' || stored === 'dim' || stored === 'light') return stored;
-  } catch {
-    // ignore
-  }
-  return 'dark';
 }
 
-const THEME_MAP = { dark: darkTheme, dim: dimTheme, light: lightTheme };
+const ThemeContext = createContext<ThemeContextValue>({
-const BG_MAP: Record<ThemeMode, string> = {
+  theme: 'light',
-  dark:  '#0a0a12',
+  toggleTheme: () => {},
-  dim:   '#1e1b2e',
+});
-  light: '#ffffff',
-};
 
-interface ThemeProviderProps {
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  children: ReactNode;
+  const [theme, setTheme] = useState<Theme>(() => {
-}
+    const saved = localStorage.getItem('theme');
-
+    return (saved === 'dark' || saved === 'light') ? saved : 'light';
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  });
-  const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialMode);
-  const theme = THEME_MAP[themeMode];
-  const isDark = themeMode === 'dark';
-
-  const toggleTheme = () => {
-    setThemeMode((prev) =>
-      prev === 'dark' ? 'dim' : prev === 'dim' ? 'light' : 'dark'
-    );
-  };
 
   useEffect(() => {
-    const root = document.documentElement;
+    if (theme === 'dark') {
-    root.classList.remove('dark', 'dim');
+      document.documentElement.setAttribute('data-theme', 'dark');
-    if (themeMode !== 'light') root.classList.add(themeMode);
+    } else {
-
+      document.documentElement.removeAttribute('data-theme');
-    document.body.style.background = BG_MAP[themeMode];
-
-    try {
-      localStorage.setItem(STORAGE_KEY, themeMode);
-    } catch {
-      // ignore
     }
-  }, [themeMode]);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
 
   return (
-    <ThemeContext.Provider value={{ isDark, themeMode, theme, toggleTheme }}>
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
       {children}
     </ThemeContext.Provider>
   );
-};
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

frontend/src/contexts/index.ts

@@ -1,2 +1 @@
-export { ThemeProvider } from './ThemeContext';
+export { ThemeProvider, useTheme } from './ThemeContext';
-export { useTheme } from './useTheme';

frontend/src/contexts/theme-context.ts

@@ -1,12 +0,0 @@
-import { createContext } from 'react';
-
-import type { ThemeColors, ThemeMode } from '../types/theme';
-
-export interface ThemeContextValue {
-  isDark: boolean;
-  themeMode: ThemeMode;
-  theme: ThemeColors;
-  toggleTheme: () => void;
-}
-
-export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

frontend/src/contexts/useTheme.ts

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-
-import { ThemeContext, type ThemeContextValue } from './theme-context';
-
-export function useTheme(): ThemeContextValue {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-}