样式修噶

frontend-web/src/contexts/ThemeContext.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { useTheme as useNextTheme } from 'next-themes';
 
 // 主题类型
 export type ThemeType = 'dark' | 'light';
@@ -91,6 +92,7 @@ interface ThemeProviderProps {
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { setTheme: setNextTheme } = useNextTheme();
   const [theme, setThemeState] = useState<ThemeType>(() => {
     // 从 localStorage 读取保存的主题
     const saved = localStorage.getItem('strategy-theme');
@@ -107,13 +109,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     setThemeState(newTheme);
   };
 
-  // 保存到 localStorage
+  // 保存到 localStorage，并同步 html class 与 next-themes
   useEffect(() => {
     localStorage.setItem('strategy-theme', theme);
-    // 更新文档类名
     document.documentElement.classList.remove('dark', 'light');
     document.documentElement.classList.add(theme);
-  }, [theme]);
+    setNextTheme(theme);
+  }, [theme, setNextTheme]);
 
   const themeConfig = themes[theme];