feat: 添加浅色主题支持

- 配置浅色主题配色方案和 CSS 变量
- 修复组件在浅色模式下的样式适配
- 统一文字颜色类名使用 CSS 变量
- 优化玻璃效果在浅色主题下的显示

frontend/src/components/ThemeToggle.jsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react'
+import { Sun, Moon } from 'lucide-react'
+import clsx from 'clsx'
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(true)
+
+  useEffect(() => {
+    // 从 localStorage 读取主题
+    const saved = localStorage.getItem('theme')
+    if (saved) {
+      setIsDark(saved === 'dark')
+      document.documentElement.classList.toggle('light', saved === 'light')
+    } else {
+      // 检测系统偏好
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      setIsDark(prefersDark)
+      if (!prefersDark) {
+        document.documentElement.classList.add('light')
+      }
+    }
+  }, [])
+
+  const toggleTheme = () => {
+    const newIsDark = !isDark
+    setIsDark(newIsDark)
+    document.documentElement.classList.toggle('light', !newIsDark)
+    localStorage.setItem('theme', newIsDark ? 'dark' : 'light')
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-lg transition-all duration-200 hover:bg-white/10 text-secondary hover:text-primary"
+      title={isDark ? '切换到浅色模式' : '切换到深色模式'}
+    >
+      {isDark ? (
+        <Sun className="w-4 h-4" />
+      ) : (
+        <Moon className="w-4 h-4" />
+      )}
+    </button>
+  )
+}