From e3cd16189b741a6b32abcfdcb1af93b863dbe717 Mon Sep 17 00:00:00 2001
From: Sline <realakayuki@gmail.com>
Date: Thu, 9 Oct 2025 16:03:28 +0800
Subject: [PATCH] fix: linux app theme (#4997)

---
 UPDATELOG.md                              |  1 +
 src/components/layout/use-custom-theme.ts | 45 +++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/UPDATELOG.md b/UPDATELOG.md
index b9f7d59e..4fefc9d6 100644
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -44,6 +44,7 @@
 - 修复 Windows 深色模式下首次启动客户端标题栏颜色异常
 - 修复静默启动不加载完整 WebView 的问题
 - 修复 Linux WebKit 网络进程的崩溃
+- 修复 Linux GNOME/KDE 桌面下，应用主题颜色选择“系统”后，不随操作系统主题（Dark/Light）切换
 
 ## v2.4.2
 
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index 1bc05b26..145bc5bd 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -53,6 +53,13 @@ export const useCustomTheme = () => {
       return;
     }
 
+    if (
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function"
+    ) {
+      return;
+    }
+
     let isMounted = true;
 
     const timerId = setTimeout(() => {
@@ -90,6 +97,44 @@ export const useCustomTheme = () => {
     };
   }, [theme_mode, appWindow, setMode]);
 
+  useEffect(() => {
+    if (theme_mode !== "system") {
+      return;
+    }
+
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const syncMode = (isDark: boolean) => setMode(isDark ? "dark" : "light");
+    const handleChange = (event: MediaQueryListEvent) =>
+      syncMode(event.matches);
+
+    syncMode(mediaQuery.matches);
+
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+
+    type MediaQueryListLegacy = MediaQueryList & {
+      addListener?: (
+        listener: (this: MediaQueryList, event: MediaQueryListEvent) => void,
+      ) => void;
+      removeListener?: (
+        listener: (this: MediaQueryList, event: MediaQueryListEvent) => void,
+      ) => void;
+    };
+
+    const legacyQuery = mediaQuery as MediaQueryListLegacy;
+    legacyQuery.addListener?.(handleChange);
+    return () => legacyQuery.removeListener?.(handleChange);
+  }, [theme_mode, setMode]);
+
   useEffect(() => {
     if (theme_mode === undefined) {
       return;