feat: use OS default window manager

src-tauri/capabilities/desktop.json

@@ -16,6 +16,7 @@
     "deep-link:default",
     "autostart:allow-enable",
     "autostart:allow-disable",
-    "autostart:allow-is-enabled"
+    "autostart:allow-is-enabled",
+    "core:window:allow-set-theme"
   ]
 }

src-tauri/src/utils/resolve.rs

@@ -295,7 +295,7 @@ pub fn create_window(is_show: bool) -> bool {
     )
     .title("Clash Verge")
     .center()
-    .decorations(false)
+    .decorations(true)
     .fullscreen(false)
     .inner_size(DEFAULT_WIDTH as f64, DEFAULT_HEIGHT as f64)
     .min_inner_size(520.0, 520.0)

src-tauri/tauri.conf.json

@@ -58,12 +58,6 @@
     }
   },
   "app": {
-    "windows": [
-      {
-        "label": "main",
-        "titleBarStyle": "Overlay"
-      }
-    ],
     "security": {
       "capabilities": [
         "desktop-capability",

src/components/layout/use-custom-theme.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
-import { alpha, createTheme, Shadows, Theme } from "@mui/material";
+import { alpha, createTheme, Shadows, Theme as MuiTheme } from "@mui/material";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { getCurrentWebviewWindow, WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { useSetThemeMode, useThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
 import { useVerge } from "@/hooks/use-verge";
@@ -12,7 +12,7 @@ import {
   arSD as arXDataGrid,
 } from "@mui/x-data-grid/locales";
 import { useTranslation } from "react-i18next";
-const appWindow = getCurrentWebviewWindow();
+import { Theme as TauriOsTheme } from "@tauri-apps/api/window";
 
 const languagePackMap: Record<string, any> = {
   zh: { ...zhXDataGrid },
@@ -29,6 +29,7 @@ const getLanguagePackMap = (key: string) =>
  * custom theme
  */
 export const useCustomTheme = () => {
+  const appWindow: WebviewWindow = getCurrentWebviewWindow();
   const { verge } = useVerge();
   const { i18n } = useTranslation();
   const { theme_mode, theme_setting } = verge ?? {};
@@ -36,28 +37,42 @@ export const useCustomTheme = () => {
   const setMode = useSetThemeMode();
 
   useEffect(() => {
-    const themeMode = ["light", "dark", "system"].includes(theme_mode!)
+    const themeModeSetting = ["light", "dark", "system"].includes(theme_mode!)
       ? theme_mode!
       : "light";
 
-    if (themeMode !== "system") {
+    if (themeModeSetting !== "system") {
-      setMode(themeMode);
+      setMode(themeModeSetting as 'light' | 'dark');
       return;
     }
 
-    appWindow.theme().then((m) => m && setMode(m));
+    appWindow.theme().then((systemTheme: 'light' | 'dark' | null) => {
-    const unlisten = appWindow.onThemeChanged((e) => setMode(e.payload));
+      if (systemTheme) {
+        setMode(systemTheme);
+      }
+    });
+    const unlisten = appWindow.onThemeChanged(({ payload }: { payload: 'light' | 'dark' }) => {
+      setMode(payload);
+    });
 
     return () => {
-      unlisten.then((fn) => fn());
+      unlisten.then((fn: () => void) => fn());
     };
-  }, [theme_mode]);
+  }, [theme_mode, setMode, i18n, theme_setting, appWindow]);
+
+  useEffect(() => {
+    if (mode) {
+      appWindow.setTheme(mode as TauriOsTheme).catch((err: any) => {
+        console.error("Failed to set window theme:", err);
+      });
+    }
+  }, [mode, appWindow]);
 
   const theme = useMemo(() => {
     const setting = theme_setting || {};
     const dt = mode === "light" ? defaultTheme : defaultDarkTheme;
 
-    let theme: Theme;
+    let theme: MuiTheme;
 
     try {
       theme = createTheme(