diff --git a/src-tauri/capabilities/desktop.json b/src-tauri/capabilities/desktop.json index dd89c54b..823c9af9 100755 --- a/src-tauri/capabilities/desktop.json +++ b/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" ] } diff --git a/src-tauri/src/utils/resolve.rs b/src-tauri/src/utils/resolve.rs index 6869ce98..45d36eff 100644 --- a/src-tauri/src/utils/resolve.rs +++ b/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) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index f99a585e..149aad88 100755 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -58,12 +58,6 @@ } }, "app": { - "windows": [ - { - "label": "main", - "titleBarStyle": "Overlay" - } - ], "security": { "capabilities": [ "desktop-capability", diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts index 7932bbdf..0b5925bc 100644 --- a/src/components/layout/use-custom-theme.ts +++ b/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 { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"; +import { alpha, createTheme, Shadows, Theme as MuiTheme } from "@mui/material"; +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 = { 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") { - setMode(themeMode); + if (themeModeSetting !== "system") { + setMode(themeModeSetting as 'light' | 'dark'); return; } - appWindow.theme().then((m) => m && setMode(m)); - const unlisten = appWindow.onThemeChanged((e) => setMode(e.payload)); + appWindow.theme().then((systemTheme: 'light' | 'dark' | null) => { + 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(