Add Frontend 增加一层渐变背景色

frontend/src/contexts/ThemeContext.tsx

@@ -1,34 +1,58 @@
 import React, { useEffect, useState, type ReactNode } from 'react';
 
-import { darkTheme, lightTheme } from '../types/theme';
+import { darkTheme, dimTheme, lightTheme, type ThemeMode } from '../types/theme';
 import { ThemeContext } from './theme-context';
 
+const STORAGE_KEY = 'app-theme-mode';
+
+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 BG_MAP: Record<ThemeMode, string> = {
+  dark:  '#0a0a12',
+  dim:   '#1e1b2e',
+  light: '#ffffff',
+};
+
 interface ThemeProviderProps {
   children: ReactNode;
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [isDark, setIsDark] = useState<boolean>(true);
-  const theme = isDark ? darkTheme : lightTheme;
+  const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialMode);
+  const theme = THEME_MAP[themeMode];
+  const isDark = themeMode === 'dark';
 
   const toggleTheme = () => {
-    setIsDark((prev) => !prev);
+    setThemeMode((prev) =>
+      prev === 'dark' ? 'dim' : prev === 'dim' ? 'light' : 'dark'
+    );
   };
 
   useEffect(() => {
-    document.documentElement.classList.toggle('dark', isDark);
-    document.body.classList.toggle('dark-mode', isDark);
+    const root = document.documentElement;
+    root.classList.remove('dark', 'dim');
+    if (themeMode !== 'light') root.classList.add(themeMode);
 
-    if (isDark) {
-      document.body.style.background = '#0a0a12';
-      return;
+    document.body.style.background = BG_MAP[themeMode];
+
+    try {
+      localStorage.setItem(STORAGE_KEY, themeMode);
+    } catch {
+      // ignore
     }
-
-    document.body.style.background = '#ffffff';
-  }, [isDark]);
+  }, [themeMode]);
 
   return (
-    <ThemeContext.Provider value={{ isDark, theme, toggleTheme }}>
+    <ThemeContext.Provider value={{ isDark, themeMode, theme, toggleTheme }}>
       {children}
     </ThemeContext.Provider>
   );

frontend/src/contexts/theme-context.ts

@@ -1,9 +1,10 @@
 import { createContext } from 'react';
 
-import type { ThemeColors } from '../types/theme';
+import type { ThemeColors, ThemeMode } from '../types/theme';
 
 export interface ThemeContextValue {
   isDark: boolean;
+  themeMode: ThemeMode;
   theme: ThemeColors;
   toggleTheme: () => void;
 }