From 56d398acb5665f80f2cbb3e403f9b14ed2b8e472 Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Wed, 29 Jul 2026 02:05:55 +0800
Subject: [PATCH] fix(theme): sync dark mode with native window appearance

---
 index.html                          | 15 +++++++++++++++
 src-tauri/capabilities/default.json |  8 +++++++-
 src/styles.css                      |  1 +
 src/theme.ts                        | 25 ++++++++++++++++++++++++-
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index c609686..0030da6 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      (() => {
+        try {
+          const savedTheme = localStorage.getItem('easy-cli-proxy-api.theme');
+          const theme = savedTheme === 'light' || savedTheme === 'dark'
+            ? savedTheme
+            : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          document.documentElement.dataset.theme = theme;
+          document.documentElement.style.colorScheme = theme;
+          document.documentElement.style.backgroundColor = theme === 'dark' ? '#101419' : '#faf9f5';
+        } catch {
+          // The app applies the theme again during initialization.
+        }
+      })();
+    </script>
     <title>EasyCLIProxyAPI</title>
   </head>
   <body>
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index fbc9051..0a29d28 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -3,5 +3,11 @@
   "identifier": "default",
   "description": "Default permissions for the main EasyCLIProxyAPI window.",
   "windows": ["main"],
-  "permissions": ["core:event:allow-listen", "core:event:allow-unlisten"]
+  "permissions": [
+    "core:event:allow-listen",
+    "core:event:allow-unlisten",
+    "core:window:allow-set-theme",
+    "core:window:allow-set-background-color",
+    "core:webview:allow-set-webview-background-color"
+  ]
 }
diff --git a/src/styles.css b/src/styles.css
index 89c2fae..d5f6a40 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -246,6 +246,7 @@ body,
   min-width: 0;
   height: 100%;
   margin: 0;
+  background: var(--theme-faf9f5);
 }
 
 .app-error-boundary {
diff --git a/src/theme.ts b/src/theme.ts
index 8f7e3f8..1652501 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,6 +1,25 @@
+import { getCurrentWebview } from '@tauri-apps/api/webview';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+
 export type AppTheme = 'light' | 'dark';
 
 const STORAGE_KEY = 'easy-cli-proxy-api.theme';
+const WINDOW_BACKGROUND: Record<AppTheme, string> = {
+  light: '#faf9f5',
+  dark: '#101419',
+};
+
+async function applyNativeTheme(theme: AppTheme): Promise<void> {
+  const background = WINDOW_BACKGROUND[theme];
+  const currentWindow = getCurrentWindow();
+  const currentWebview = getCurrentWebview();
+
+  await Promise.allSettled([
+    currentWindow.setTheme(theme),
+    currentWindow.setBackgroundColor(background),
+    currentWebview.setBackgroundColor(background),
+  ]);
+}
 
 export function detectInitialTheme(): AppTheme {
   if (typeof window === 'undefined') return 'light';
@@ -18,6 +37,11 @@ export function detectInitialTheme(): AppTheme {
 export function applyTheme(theme: AppTheme): void {
   document.documentElement.dataset.theme = theme;
   document.documentElement.style.colorScheme = theme;
+  document.documentElement.style.backgroundColor = WINDOW_BACKGROUND[theme];
+  if (document.body) {
+    document.body.style.backgroundColor = WINDOW_BACKGROUND[theme];
+  }
+  void applyNativeTheme(theme);
 }
 
 export function saveTheme(theme: AppTheme): void {
@@ -28,4 +52,3 @@ export function saveTheme(theme: AppTheme): void {
     // The in-memory theme still works when persistent storage is unavailable.
   }
 }
-