fix: theme change issue

src/main/events.ts

@@ -31,7 +31,8 @@ export const CONFIG_EVENTS = {
   // OAuth相关事件
   OAUTH_LOGIN_START: 'config:oauth-login-start', // OAuth登录开始
   OAUTH_LOGIN_SUCCESS: 'config:oauth-login-success', // OAuth登录成功
-  OAUTH_LOGIN_ERROR: 'config:oauth-login-error' // OAuth登录失败
+  OAUTH_LOGIN_ERROR: 'config:oauth-login-error', // OAuth登录失败
+  THEME_CHANGED: 'config:theme-changed' // 主题变更事件
 }
 
 // 会话相关事件

src/main/presenter/configPresenter/index.ts

@@ -997,27 +997,33 @@ export class ConfigPresenter implements IConfigPresenter {
   async initTheme() {
     const theme = this.getSetting<string>('appTheme')
     if (theme) {
-      nativeTheme.themeSource = theme as 'dark' | 'light'
+      nativeTheme.themeSource = theme as 'dark' | 'light' | 'system'
     }
     // 监听系统主题变化
     nativeTheme.on('updated', () => {
-      // 只有当主题设置为 system 时，才需要通知渲染进程
+      // 只有当主题设置为 system 时，才需要通知渲染进程系统主题变化
       if (nativeTheme.themeSource === 'system') {
         eventBus.sendToMain(SYSTEM_EVENTS.SYSTEM_THEME_UPDATED, nativeTheme.shouldUseDarkColors)
       }
     })
   }
 
-  async toggleTheme(theme: 'dark' | 'light' | 'system'): Promise<boolean> {
+  async setTheme(theme: 'dark' | 'light' | 'system'): Promise<boolean> {
     nativeTheme.themeSource = theme
     this.setSetting('appTheme', theme)
+    // 通知所有窗口主题已更改
+    eventBus.sendToRenderer(CONFIG_EVENTS.THEME_CHANGED, SendTarget.ALL_WINDOWS, theme)
     return nativeTheme.shouldUseDarkColors
   }
 
   async getTheme(): Promise<string> {
     return this.getSetting<string>('appTheme') || 'system'
   }
 
+  async getCurrentThemeIsDark(): Promise<boolean> {
+    return nativeTheme.shouldUseDarkColors
+  }
+
   async getSystemTheme(): Promise<'dark' | 'light'> {
     return nativeTheme.shouldUseDarkColors ? 'dark' : 'light'
   }

src/renderer/src/App.vue

@@ -39,15 +39,19 @@ const devicePresenter = usePresenter('devicePresenter')
 watch(
   [() => themeStore.themeMode, () => settingsStore.fontSizeClass],
   ([newTheme, newFontSizeClass], [oldTheme, oldFontSizeClass]) => {
+    let newThemeName = newTheme
+    if (newTheme === 'system') {
+      newThemeName = themeStore.isDark ? 'dark' : 'light'
+    }
     if (oldTheme) {
       document.documentElement.classList.remove(oldTheme)
     }
     if (oldFontSizeClass) {
       document.documentElement.classList.remove(oldFontSizeClass)
     }
-    document.documentElement.classList.add(newTheme)
+    document.documentElement.classList.add(newThemeName)
     document.documentElement.classList.add(newFontSizeClass)
-    console.log('newTheme', themeStore.themeMode)
+    console.log('newTheme', newThemeName)
   },
   { immediate: false } // 初始化在 onMounted 中处理
 )

src/renderer/src/events.ts

@@ -20,7 +20,8 @@ export const CONFIG_EVENTS = {
   CONTENT_PROTECTION_CHANGED: 'config:content-protection-changed',
   LANGUAGE_CHANGED: 'config:language-changed', // 新增：语言变更事件
   SOUND_ENABLED_CHANGED: 'config:sound-enabled-changed', // 新增：声音启用状态变更事件
-  COPY_WITH_COT_CHANGED: 'config:copy-with-cot-enabled-changed'
+  COPY_WITH_COT_CHANGED: 'config:copy-with-cot-enabled-changed',
+  THEME_CHANGED: 'config:theme-changed'
 }
 
 // 会话相关事件
@@ -143,3 +144,7 @@ export const DIALOG_EVENTS = {
 export const RAG_EVENTS = {
   FILE_UPDATED: 'rag:file-updated' // 文件状态更新
 }
+// 系统相关事件
+export const SYSTEM_EVENTS = {
+  SYSTEM_THEME_UPDATED: 'system:theme-updated'
+}

src/renderer/src/stores/theme.ts

@@ -3,6 +3,7 @@ import { useDark, useToggle } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { ref, onMounted, onUnmounted } from 'vue'
 import type { IpcRendererEvent } from 'electron'
+import { CONFIG_EVENTS, SYSTEM_EVENTS } from '@/events'
 
 export type ThemeMode = 'dark' | 'light' | 'system'
 
@@ -19,67 +20,68 @@ export const useThemeStore = defineStore('theme', () => {
     const currentTheme = (await configPresenter.getTheme()) as ThemeMode
     themeMode.value = currentTheme
 
-    // 如果是系统主题模式，则根据系统实际深色/浅色设置来设置界面
-    if (currentTheme === 'system') {
-      const systemIsDark = await configPresenter.toggleTheme('system')
-      console.log('initTheme', systemIsDark)
-      toggleDark(systemIsDark)
-    } else {
-      toggleDark(currentTheme === 'dark')
-    }
+    // 获取当前实际的深色模式状态
+    const isDarkMode = await configPresenter.getCurrentThemeIsDark()
+    console.log('initTheme - theme:', currentTheme, 'isDark:', isDarkMode)
+    toggleDark(isDarkMode)
   }
 
   initTheme()
 
   // 监听系统主题变化事件
   const handleSystemThemeChange = (_event: IpcRendererEvent, isDarkMode: boolean) => {
+    console.log('handleSystemThemeChange', isDarkMode)
     // 只有在系统模式下才跟随系统主题变化
     if (themeMode.value === 'system') {
       toggleDark(isDarkMode)
     }
   }
+  // 监听用户主题变化事件
+  const handleUserThemeChange = (_event: IpcRendererEvent, theme: ThemeMode) => {
+    if (themeMode.value !== theme) {
+      configPresenter.getCurrentThemeIsDark().then((isDark) => {
+        console.log('handleUserThemeChange', theme, isDark)
+        themeMode.value = theme
+        toggleDark(isDark)
+      })
+    }
+  }
 
   // 注册和清理主题变化监听器
   onMounted(() => {
-    window.electron.ipcRenderer.on('system-theme-updated', handleSystemThemeChange)
+    window.electron.ipcRenderer.on(SYSTEM_EVENTS.SYSTEM_THEME_UPDATED, handleSystemThemeChange)
+    window.electron.ipcRenderer.on(CONFIG_EVENTS.THEME_CHANGED, handleUserThemeChange)
   })
 
   onUnmounted(() => {
-    window.electron.ipcRenderer.removeListener('system-theme-updated', handleSystemThemeChange)
+    window.electron.ipcRenderer.removeListener(
+      SYSTEM_EVENTS.SYSTEM_THEME_UPDATED,
+      handleSystemThemeChange
+    )
+    window.electron.ipcRenderer.removeListener(CONFIG_EVENTS.THEME_CHANGED, handleUserThemeChange)
   })
 
-  // 监听深色模式变化
-  // watch(isDark, (value) => {
-  //   // 只有在非系统模式下，才直接切换主题
-  //   if (themeMode.value !== 'system') {
-  //     windowPresenter.toggleTheme(value ? 'dark' : 'light')
-  //     themeMode.value = value ? 'dark' : 'light'
-  //   }
-  // })
-
   // 设置主题模式
   const setThemeMode = async (mode: ThemeMode) => {
     themeMode.value = mode
-    const isDarkMode = await configPresenter.toggleTheme(mode)
+    const isDarkMode = await configPresenter.setTheme(mode)
 
-    // 如果不是系统模式，直接设置深色/浅色状态
-    // 如果是系统模式，toggleTheme 会返回系统当前的深色状态
+    // 设置界面深色/浅色状态
     toggleDark(isDarkMode)
   }
 
   // 循环切换主题：light -> dark -> system -> light
-  const cycleTheme = () => {
+  const cycleTheme = async () => {
     console.log('cycleTheme', themeMode.value)
-    if (themeMode.value === 'light') setThemeMode('dark')
-    else if (themeMode.value === 'dark') setThemeMode('system')
-    else setThemeMode('light')
+    if (themeMode.value === 'light') await setThemeMode('dark')
+    else if (themeMode.value === 'dark') await setThemeMode('system')
+    else await setThemeMode('light')
   }
 
   return {
     isDark,
     toggleDark,
     themeMode,
-    setThemeMode,
     cycleTheme
   }
 })

src/shared/presenter.d.ts

@@ -428,8 +428,9 @@ export interface IConfigPresenter {
   getNotificationsEnabled(): boolean
   // 主题设置
   initTheme(): void
-  toggleTheme(theme: 'dark' | 'light' | 'system'): Promise<boolean>
+  setTheme(theme: 'dark' | 'light' | 'system'): Promise<boolean>
   getTheme(): Promise<string>
+  getCurrentThemeIsDark(): Promise<boolean>
   getSystemTheme(): Promise<'dark' | 'light'>
   getCustomPrompts(): Promise<Prompt[]>
   setCustomPrompts(prompts: Prompt[]): Promise<void>