fix(theme): sync dark mode with native window appearance

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>

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"
+  ]
 }

src/styles.css

@@ -246,6 +246,7 @@ body,
   min-width: 0;
   height: 100%;
   margin: 0;
+  background: var(--theme-faf9f5);
 }
 
 .app-error-boundary {

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.
   }
 }
-