From 03d5c3715f0ededabd78431cebb2a8aefd86a912 Mon Sep 17 00:00:00 2001
From: Tunglies <77394545+Tunglies@users.noreply.github.com>
Date: Thu, 12 Nov 2026 10:33:05 +0800
Subject: [PATCH] fix(macos): sync titlebar backgrounds with theme changes

The window and webview backgrounds retain their startup colors when
the resolved theme changes. With Tauri's full-size content view,
these colors affect the native titlebar even after setTheme succeeds.

Synchronize both backgrounds through WebviewWindow.setBackgroundColor
on macOS, reuse the startup palette, and allow both background commands.

Wry commit 1d1b870 implemented macOS background colors through
WKWebView.underPageBackgroundColor. CVR adopted that behavior in
7d29c0c6 (#6318), making the fixed startup colors from 683667f8 (#5637)
effective on macOS.

Closes #8205
Closes #7968
Closes #8272
Closes #8625
Upstream: https://github.com/tauri-apps/wry/commit/1d1b8707665b4638e040dde7a88cd33d77ba2ebc

Co-authored-by: qzda <qinzhidaoa@gmail.com>
Co-authored-by: Vickers Zhu <vickerszhu@163.com>
---
 Changelog.md                                | 1 +
 src-tauri/capabilities/desktop.json         | 2 ++
 src/pages/_layout/hooks/use-custom-theme.ts | 7 +++++++
 3 files changed, 10 insertions(+)

diff --git a/Changelog.md b/Changelog.md
index e53b4ebf3..87e8220fb 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -34,6 +34,7 @@
 
 - 修复 macOS TUN 模式下原有 DNS 被清除、关闭后 DNS 未恢复及联网后设置未生效
 - 修复 macOS 断网时误报代理已回退直连，恢复联网后自动重试系统代理
+- 修复 macOS 切换主题后标题栏保留原有深浅色
 
 </details>
 
diff --git a/src-tauri/capabilities/desktop.json b/src-tauri/capabilities/desktop.json
index 46892088e..fbba5dd14 100755
--- a/src-tauri/capabilities/desktop.json
+++ b/src-tauri/capabilities/desktop.json
@@ -17,6 +17,8 @@
     "autostart:allow-disable",
     "autostart:allow-is-enabled",
     "core:window:allow-set-theme",
+    "core:window:allow-set-background-color",
+    "core:webview:allow-set-webview-background-color",
     "notification:default",
     "http:default",
     "http:allow-fetch",
diff --git a/src/pages/_layout/hooks/use-custom-theme.ts b/src/pages/_layout/hooks/use-custom-theme.ts
index fd765f6fd..2a09dfe32 100644
--- a/src/pages/_layout/hooks/use-custom-theme.ts
+++ b/src/pages/_layout/hooks/use-custom-theme.ts
@@ -9,6 +9,7 @@ import { useEffect, useMemo } from 'react'
 import { useVerge } from '@/hooks/use-verge'
 import { defaultDarkTheme, defaultTheme } from '@/pages/_theme'
 import { useSetThemeMode, useThemeMode } from '@/services/states'
+import getSystem from '@/utils/get-system'
 
 const CSS_INJECTION_SCOPE_ROOT = '[data-css-injection-root]'
 const CSS_INJECTION_SCOPE_LIMIT =
@@ -139,6 +140,12 @@ export const useCustomTheme = () => {
         console.error(`Failed to set window theme to ${mode}:`, err)
       })
     }
+    if (getSystem() === 'macos' && mode) {
+      const background = mode === 'light' ? defaultTheme : defaultDarkTheme
+      appWindow.setBackgroundColor(background.background_color).catch((err) => {
+        console.error('Failed to set window background:', err)
+      })
+    }
   }, [mode, appWindow, theme_mode])
 
   const theme = useMemo(() => {