From d0ddfce2800b663d8ec2c0214b7a52d3e1d45fd9 Mon Sep 17 00:00:00 2001
From: fullex <106392080+0xfullex@users.noreply.github.com>
Date: Fri, 21 Mar 2025 13:11:21 +0800
Subject: [PATCH] fix: miniWindow not sync with theme change (#3643)

* fix: miniWindow not sync theme change

* fix: mac: miniWindow theme display incorrect

* fix: mac: miniWindow display error when system dark+ app light
---
 src/main/ipc.ts                               | 15 +++++++++++-
 src/renderer/src/context/ThemeProvider.tsx    | 10 +++++++-
 .../src/windows/mini/home/HomeWindow.tsx      | 24 +++++++++++++++----
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/main/ipc.ts b/src/main/ipc.ts
index 279ce1ba..10255e56 100644
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -84,8 +84,21 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
   })
 
   // theme
-  ipcMain.handle('app:set-theme', (_, theme: ThemeMode) => {
+  ipcMain.handle('app:set-theme', (event, theme: ThemeMode) => {
+    if (theme === configManager.getTheme()) return
+
     configManager.setTheme(theme)
+
+    // should sync theme change to all windows
+    const senderWindowId = event.sender.id
+    const windows = BrowserWindow.getAllWindows()
+    // 向其他窗口广播主题变化
+    windows.forEach((win) => {
+      if (win.webContents.id !== senderWindowId) {
+        win.webContents.send('theme:change', theme)
+      }
+    })
+
     mainWindow?.setTitleBarOverlay &&
       mainWindow.setTitleBarOverlay(theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight)
   })
diff --git a/src/renderer/src/context/ThemeProvider.tsx b/src/renderer/src/context/ThemeProvider.tsx
index e9242b3b..95478b35 100644
--- a/src/renderer/src/context/ThemeProvider.tsx
+++ b/src/renderer/src/context/ThemeProvider.tsx
@@ -45,7 +45,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, defaultT
 
   useEffect(() => {
     document.body.setAttribute('os', isMac ? 'mac' : 'windows')
-  }, [])
+
+    // listen theme change from main process from other windows
+    const themeChangeListenerRemover = window.electron.ipcRenderer.on('theme:change', (_, newTheme) => {
+      setTheme(newTheme)
+    })
+    return () => {
+      themeChangeListenerRemover()
+    }
+  })
 
   return <ThemeContext.Provider value={{ theme: _theme, toggleTheme }}>{children}</ThemeContext.Provider>
 }
diff --git a/src/renderer/src/windows/mini/home/HomeWindow.tsx b/src/renderer/src/windows/mini/home/HomeWindow.tsx
index 7e6eb182..b3967577 100644
--- a/src/renderer/src/windows/mini/home/HomeWindow.tsx
+++ b/src/renderer/src/windows/mini/home/HomeWindow.tsx
@@ -29,7 +29,7 @@ const HomeWindow: FC = () => {
   const textChange = useState(() => {})[1]
   const { defaultAssistant } = useDefaultAssistant()
   const { defaultModel: model } = useDefaultModel()
-  const { language, readClipboardAtStartup } = useSettings()
+  const { language, readClipboardAtStartup, windowStyle, theme } = useSettings()
   const { t } = useTranslation()
   const inputBarRef = useRef<HTMLDivElement>(null)
   const featureMenusRef = useRef<FeatureMenusRef>(null)
@@ -201,9 +201,24 @@ const HomeWindow: FC = () => {
     }
   }, [route])
 
+  const backgroundColor = () => {
+    // ONLY MAC: when transparent style + light theme: use vibrancy effect
+    // because the dark style under mac's vibrancy effect has not been implemented
+    if (
+      isMac &&
+      windowStyle === 'transparent' &&
+      theme === 'light' &&
+      !window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return 'transparent'
+    }
+
+    return 'var(--color-background)'
+  }
+
   if (['chat', 'summary', 'explanation'].includes(route)) {
     return (
-      <Container>
+      <Container style={{ backgroundColor: backgroundColor() }}>
         {route === 'chat' && (
           <>
             <InputBar
@@ -232,7 +247,7 @@ const HomeWindow: FC = () => {
 
   if (route === 'translate') {
     return (
-      <Container>
+      <Container style={{ backgroundColor: backgroundColor() }}>
         <TranslateWindow text={referenceText} />
         <Divider style={{ margin: '10px 0' }} />
         <Footer route={route} onExit={() => setRoute('home')} />
@@ -241,7 +256,7 @@ const HomeWindow: FC = () => {
   }
 
   return (
-    <Container>
+    <Container style={{ backgroundColor: backgroundColor() }}>
       <InputBar
         text={text}
         model={model}
@@ -280,7 +295,6 @@ const Container = styled.div`
   flex-direction: column;
   -webkit-app-region: drag;
   padding: 8px 10px;
-  background-color: ${isMac ? 'transparent' : 'var(--color-background)'};
 `
 
 const Main = styled.main`