feat: Centralize theme management with ThemeContext (#6137)

ui/desktop/src/contexts/ThemeContext.tsx

@@ -0,0 +1,137 @@
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+
+type ThemePreference = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+
+interface ThemeContextValue {
+  userThemePreference: ThemePreference;
+  setUserThemePreference: (pref: ThemePreference) => void;
+  resolvedTheme: ResolvedTheme;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function getSystemTheme(): ResolvedTheme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  if (preference === 'system') {
+    return getSystemTheme();
+  }
+  return preference;
+}
+
+function loadThemePreference(): ThemePreference {
+  const useSystemTheme = localStorage.getItem('use_system_theme');
+  if (useSystemTheme === 'true') {
+    return 'system';
+  }
+
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme === 'dark') {
+    return 'dark';
+  }
+
+  return 'light';
+}
+
+function saveThemePreference(preference: ThemePreference): void {
+  if (preference === 'system') {
+    localStorage.setItem('use_system_theme', 'true');
+  } else {
+    localStorage.setItem('use_system_theme', 'false');
+    localStorage.setItem('theme', preference);
+  }
+}
+
+function applyThemeToDocument(theme: ResolvedTheme): void {
+  const toRemove = theme === 'dark' ? 'light' : 'dark';
+  document.documentElement.classList.add(theme);
+  document.documentElement.classList.remove(toRemove);
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [userThemePreference, setUserThemePreferenceState] =
+    useState<ThemePreference>(loadThemePreference);
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() =>
+    resolveTheme(loadThemePreference())
+  );
+
+  const setUserThemePreference = useCallback((preference: ThemePreference) => {
+    setUserThemePreferenceState(preference);
+    saveThemePreference(preference);
+
+    const resolved = resolveTheme(preference);
+    setResolvedTheme(resolved);
+
+    // Broadcast to other windows via Electron
+    window.electron?.broadcastThemeChange({
+      mode: resolved,
+      useSystemTheme: preference === 'system',
+      theme: resolved,
+    });
+  }, []);
+
+  // Listen for system theme changes when preference is 'system'
+  useEffect(() => {
+    if (userThemePreference !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = () => {
+      setResolvedTheme(getSystemTheme());
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [userThemePreference]);
+
+  // Listen for theme changes from other windows (via Electron IPC)
+  useEffect(() => {
+    if (!window.electron) return;
+
+    const handleThemeChanged = (_event: unknown, ...args: unknown[]) => {
+      const themeData = args[0] as { useSystemTheme: boolean; theme: string };
+      const newPreference: ThemePreference = themeData.useSystemTheme
+        ? 'system'
+        : themeData.theme === 'dark'
+          ? 'dark'
+          : 'light';
+
+      setUserThemePreferenceState(newPreference);
+      saveThemePreference(newPreference);
+      setResolvedTheme(resolveTheme(newPreference));
+    };
+
+    window.electron.on('theme-changed', handleThemeChanged);
+    return () => {
+      window.electron.off('theme-changed', handleThemeChanged);
+    };
+  }, []);
+
+  // Apply theme to document whenever resolvedTheme changes
+  useEffect(() => {
+    applyThemeToDocument(resolvedTheme);
+  }, [resolvedTheme]);
+
+  const value: ThemeContextValue = {
+    userThemePreference,
+    setUserThemePreference,
+    resolvedTheme,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}