From 5047b0f61407d8dd9eeb7da5084cc7b835f65561 Mon Sep 17 00:00:00 2001
From: Dyna <108321411+Ahaohaohao@users.noreply.github.com>
Date: Tue, 22 Jul 2025 11:01:23 +0800
Subject: [PATCH] fix: the problem of inconsistent color of system theme window
 (#4133)

* fix-title

* Update UPDATELOG.md
---
 UPDATELOG.md                              |  6 +++++
 src/components/layout/use-custom-theme.ts | 31 ++++++++++-------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/UPDATELOG.md b/UPDATELOG.md
index 24b4ba45e..2d65f3ae9 100644
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -1,3 +1,9 @@
+## v2.4.0
+
+### 🐞 修复问题
+
+- 修复系统主题窗口颜色不一致问题
+
 ## v2.3.2
 
 ### 🐞 修复问题
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index 03b7b682d..1deba5b79 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -38,8 +38,6 @@ export const useCustomTheme = () => {
   const { theme_mode, theme_setting } = verge ?? {};
   const mode = useThemeMode();
   const setMode = useSetThemeMode();
-
-  // 提取用户自定义的背景图URL
   const userBackgroundImage = theme_setting?.background_image || "";
   const hasUserBackground = !!userBackgroundImage;
 
@@ -56,16 +54,19 @@ export const useCustomTheme = () => {
 
     let isMounted = true;
 
-    appWindow
-      .theme()
-      .then((systemTheme) => {
-        if (isMounted && systemTheme) {
-          setMode(systemTheme);
-        }
-      })
-      .catch((err) => {
-        console.error("Failed to get initial system theme:", err);
-      });
+    const timerId = setTimeout(() => {
+      if (!isMounted) return;
+      appWindow
+        .theme()
+        .then((systemTheme) => {
+          if (isMounted && systemTheme) {
+            setMode(systemTheme);
+          }
+        })
+        .catch((err) => {
+          console.error("Failed to get initial system theme:", err);
+        });
+    }, 0);
 
     const unlistenPromise = appWindow.onThemeChanged(({ payload }) => {
       if (isMounted) {
@@ -75,6 +76,7 @@ export const useCustomTheme = () => {
 
     return () => {
       isMounted = false;
+      clearTimeout(timerId);
       unlistenPromise
         .then((unlistenFn) => {
           if (typeof unlistenFn === "function") {
@@ -175,7 +177,6 @@ export const useCustomTheme = () => {
       const scrollColor = mode === "light" ? "#90939980" : "#555555";
       const dividerColor =
         mode === "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.06)";
-
       rootEle.style.setProperty("--divider-color", dividerColor);
       rootEle.style.setProperty("--background-color", backgroundColor);
       rootEle.style.setProperty("--selection-color", selectColor);
@@ -188,7 +189,6 @@ export const useCustomTheme = () => {
         "--background-color-alpha",
         alpha(muiTheme.palette.primary.main, 0.1),
       );
-      // 添加CSS变量
       rootEle.style.setProperty(
         "--window-border-color",
         mode === "light" ? "#cccccc" : "#1E1E1E",
@@ -201,8 +201,6 @@ export const useCustomTheme = () => {
         "--scrollbar-thumb",
         mode === "light" ? "#c1c1c1" : "#555555",
       );
-
-      // 设置背景图相关变量
       rootEle.style.setProperty(
         "--user-background-image",
         hasUserBackground ? `url('${userBackgroundImage}')` : "none",
@@ -227,7 +225,6 @@ export const useCustomTheme = () => {
     }
 
     if (styleElement) {
-      // 改进的全局样式，支持用户自定义背景图
       const globalStyles = `
         /* 修复滚动条样式 */
         ::-webkit-scrollbar {