feat: support blur window

src/components/setting-verge.tsx

@@ -23,6 +23,7 @@ const SettingVerge = ({ onError }: Props) => {
 
   const {
     theme_mode: mode = "light",
+    theme_blur: blur = false,
     enable_self_startup: startup = false,
     enable_system_proxy: proxy = false,
   } = vergeConfig ?? {};
@@ -54,6 +55,20 @@ const SettingVerge = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
+      <SettingItem>
+        <ListItemText primary="Theme Blur" />
+        <GuardState
+          value={blur}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ theme_blur: e })}
+          onGuard={(e) => patchVergeConfig({ theme_blur: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
       <SettingItem>
         <ListItemText primary="Self Startup" />
         <GuardState

src/pages/_layout.tsx

@@ -3,6 +3,7 @@ import useSWR, { SWRConfig } from "swr";
 import { Route, Routes } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import {
+  alpha,
   Button,
   createTheme,
   IconButton,
@@ -12,7 +13,7 @@ import {
 } from "@mui/material";
 import { HorizontalRuleRounded, CloseRounded } from "@mui/icons-material";
 import { checkUpdate } from "@tauri-apps/api/updater";
-import { atomPaletteMode } from "../states/setting";
+import { atomPaletteMode, atomThemeBlur } from "../states/setting";
 import { getVergeConfig, windowDrag, windowHide } from "../services/cmds";
 import LogoSvg from "../assets/image/logo.svg";
 import LogPage from "./log";
@@ -54,6 +55,7 @@ const routers = [
 
 const Layout = () => {
   const [mode, setMode] = useRecoilState(atomPaletteMode);
+  const [blur, setBlur] = useRecoilState(atomThemeBlur);
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
   const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
     errorRetryCount: 2,
@@ -63,8 +65,10 @@ const Layout = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   useEffect(() => {
-    setMode(vergeConfig?.theme_mode ?? "light");
-  }, [vergeConfig?.theme_mode]);
+    if (!vergeConfig) return;
+    setBlur(!!vergeConfig.theme_blur);
+    setMode(vergeConfig.theme_mode ?? "light");
+  }, [vergeConfig]);
 
   const theme = useMemo(() => {
     // const background = mode === "light" ? "#f5f5f5" : "#000";
@@ -89,7 +93,16 @@ const Layout = () => {
   return (
     <SWRConfig value={{}}>
       <ThemeProvider theme={theme}>
-        <Paper square elevation={0} className="layout">
+        <Paper
+          square
+          elevation={0}
+          className="layout"
+          sx={[
+            (theme) => ({
+              bgcolor: alpha(theme.palette.background.paper, blur ? 0.85 : 1),
+            }),
+          ]}
+        >
           <div className="layout__left">
             <div className="the-logo">
               <img

src/services/types.ts

@@ -110,6 +110,7 @@ export namespace CmdType {
 
   export interface VergeConfig {
     theme_mode?: "light" | "dark";
+    theme_blur?: boolean;
     enable_self_startup?: boolean;
     enable_system_proxy?: boolean;
   }

src/states/setting.ts

@@ -4,3 +4,8 @@ export const atomPaletteMode = atom<"light" | "dark">({
   key: "atomPaletteMode",
   default: "light",
 });
+
+export const atomThemeBlur = atom<boolean>({
+  key: "atomThemeBlur",
+  default: false,
+});