支持系统深浅自适应同步

src/App.tsx

@@ -25,7 +25,7 @@ import NotificationWindow from './pages/NotificationWindow'
 import AIChatPage from './pages/AIChatPage'
 
 import { useAppStore } from './stores/appStore'
-import { themes, useThemeStore, type ThemeId } from './stores/themeStore'
+import { themes, useThemeStore, type ThemeId, type ThemeMode } from './stores/themeStore'
 import * as configService from './services/config'
 import { Download, X, Shield } from 'lucide-react'
 import './App.scss'
@@ -101,14 +101,27 @@ function App() {
 
   // 应用主题
   useEffect(() => {
-    document.documentElement.setAttribute('data-theme', currentTheme)
-    document.documentElement.setAttribute('data-mode', themeMode)
-
-    // 更新窗口控件颜色以适配主题
-    const symbolColor = themeMode === 'dark' ? '#ffffff' : '#1a1a1a'
-    if (!isOnboardingWindow && !isNotificationWindow) {
-      window.electronAPI.window.setTitleBarOverlay({ symbolColor })
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const applyMode = (mode: ThemeMode, systemDark?: boolean) => {
+      const effectiveMode = mode === 'system' ? (systemDark ?? mq.matches ? 'dark' : 'light') : mode
+      document.documentElement.setAttribute('data-theme', currentTheme)
+      document.documentElement.setAttribute('data-mode', effectiveMode)
+      const symbolColor = effectiveMode === 'dark' ? '#ffffff' : '#1a1a1a'
+      if (!isOnboardingWindow && !isNotificationWindow) {
+        window.electronAPI.window.setTitleBarOverlay({ symbolColor })
+      }
     }
+
+    applyMode(themeMode)
+
+    // 监听系统主题变化
+    const handler = (e: MediaQueryListEvent) => {
+      if (useThemeStore.getState().themeMode === 'system') {
+        applyMode('system', e.matches)
+      }
+    }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
   }, [currentTheme, themeMode, isOnboardingWindow, isNotificationWindow])
 
   // 读取已保存的主题设置
@@ -122,7 +135,7 @@ function App() {
         if (savedThemeId && themes.some((theme) => theme.id === savedThemeId)) {
           setTheme(savedThemeId as ThemeId)
         }
-        if (savedThemeMode === 'light' || savedThemeMode === 'dark') {
+        if (savedThemeMode === 'light' || savedThemeMode === 'dark' || savedThemeMode === 'system') {
           setThemeMode(savedThemeMode)
         }
       } catch (e) {

src/pages/SettingsPage.tsx

@@ -7,7 +7,7 @@ import { dialog } from '../services/ipc'
 import * as configService from '../services/config'
 import {
   Eye, EyeOff, FolderSearch, FolderOpen, Search, Copy,
-  RotateCcw, Trash2, Plug, Check, Sun, Moon,
+  RotateCcw, Trash2, Plug, Check, Sun, Moon, Monitor,
   Palette, Database, Download, HardDrive, Info, RefreshCw, ChevronDown, Mic,
   ShieldCheck, Fingerprint, Lock, KeyRound, Bell, Globe, BarChart2
 } from 'lucide-react'
@@ -55,6 +55,14 @@ function SettingsPage() {
 
   const resetChatStore = useChatStore((state) => state.reset)
   const { currentTheme, themeMode, setTheme, setThemeMode } = useThemeStore()
+  const [systemDark, setSystemDark] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches)
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+  const effectiveMode = themeMode === 'system' ? (systemDark ? 'dark' : 'light') : themeMode
   const clearAnalyticsStoreCache = useAnalyticsStore((state) => state.clearCache)
 
   const [activeTab, setActiveTab] = useState<SettingsTab>('appearance')
@@ -993,11 +1001,14 @@ function SettingsPage() {
         <button className={`mode-btn ${themeMode === 'dark' ? 'active' : ''}`} onClick={() => setThemeMode('dark')}>
           <Moon size={16} /> 深色
         </button>
+        <button className={`mode-btn ${themeMode === 'system' ? 'active' : ''}`} onClick={() => setThemeMode('system')}>
+          <Monitor size={16} /> 跟随系统
+        </button>
       </div>
       <div className="theme-grid">
         {themes.map((theme) => (
           <div key={theme.id} className={`theme-card ${currentTheme === theme.id ? 'active' : ''}`} onClick={() => setTheme(theme.id)}>
-            <div className="theme-preview" style={{ background: themeMode === 'dark' ? 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)' : `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)` }}>
+            <div className="theme-preview" style={{ background: effectiveMode === 'dark' ? 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)' : `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)` }}>
               <div className="theme-accent" style={{ background: theme.primaryColor }} />
             </div>
             <div className="theme-info">

src/services/config.ts

@@ -118,13 +118,13 @@ export async function setWxidConfig(wxid: string, configValue: WxidConfig): Prom
 }
 
 // 获取主题
-export async function getTheme(): Promise<'light' | 'dark'> {
+export async function getTheme(): Promise<'light' | 'dark' | 'system'> {
   const value = await config.get(CONFIG_KEYS.THEME)
-  return (value as 'light' | 'dark') || 'light'
+  return (value as 'light' | 'dark' | 'system') || 'light'
 }
 
 // 设置主题
-export async function setTheme(theme: 'light' | 'dark'): Promise<void> {
+export async function setTheme(theme: 'light' | 'dark' | 'system'): Promise<void> {
   await config.set(CONFIG_KEYS.THEME, theme)
 }
 

src/stores/themeStore.ts

@@ -2,7 +2,7 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 export type ThemeId = 'cloud-dancer' | 'corundum-blue' | 'kiwi-green' | 'spicy-red' | 'teal-water'
-export type ThemeMode = 'light' | 'dark'
+export type ThemeMode = 'light' | 'dark' | 'system'
 
 export interface ThemeInfo {
   id: ThemeId