feat: support blur window

src-tauri/Cargo.lock

@@ -54,6 +54,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-shadows",
+ "tauri-plugin-vibrancy",
  "tokio",
  "warp",
  "winreg 0.10.1",
@@ -3369,6 +3370,17 @@ dependencies = [
  "windows 0.29.0",
 ]
 
+[[package]]
+name = "tauri-plugin-vibrancy"
+version = "0.0.0"
+source = "git+https://github.com/tauri-apps/tauri-plugin-vibrancy#b4fceab0d4a6d024f1b9916c126f10f513101128"
+dependencies = [
+ "cocoa",
+ "objc",
+ "tauri",
+ "windows 0.29.0",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "0.2.1"

src-tauri/Cargo.toml

@@ -22,6 +22,7 @@ serde = { version = "1.0", features = ["derive"] }
 # tauri = { git = "https://github.com/tauri-apps/tauri", rev = "5e0d59ec", features = ["api-all", "system-tray"] }
 tauri = { git = "https://github.com/tauri-apps/tauri", branch = "next",  features = ["api-all", "system-tray", "updater"] }
 tauri-plugin-shadows = { git = "https://github.com/tauri-apps/tauri-plugin-shadows", features = ["tauri-impl"] }
+tauri-plugin-vibrancy = { git = "https://github.com/tauri-apps/tauri-plugin-vibrancy", features = ["tauri-impl"] }
 
 reqwest = { version = "0.11", features = ["json"] }
 tokio = { version = "1", features = ["full"] }

src-tauri/src/core/verge.rs

@@ -9,6 +9,10 @@ pub struct VergeConfig {
   /// `light` or `dark`
   pub theme_mode: Option<String>,
 
+  /// enable blur mode
+  /// maybe be able to set the alpha
+  pub theme_blur: Option<bool>,
+
   /// can the app auto startup
   pub enable_self_startup: Option<bool>,
 
@@ -157,6 +161,9 @@ impl Verge {
     if patch.theme_mode.is_some() {
       self.config.theme_mode = patch.theme_mode;
     }
+    if patch.theme_blur.is_some() {
+      self.config.theme_blur = patch.theme_blur;
+    }
 
     // should update system startup
     if patch.enable_self_startup.is_some() {

src-tauri/src/utils/resolve.rs

@@ -9,6 +9,15 @@ pub fn resolve_setup(app: &App) {
   let window = app.get_window("main").unwrap();
   window.set_shadow(true);
 
+  use tauri_plugin_vibrancy::Vibrancy;
+  #[cfg(target_os = "windows")]
+  window.apply_blur();
+  #[cfg(target_os = "macos")]
+  {
+    use tauri_plugin_vibrancy::MacOSVibrancy;
+    window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
+  }
+
   // setup a simple http server for singleton
   server::embed_server(&app.handle());
 

src-tauri/tauri.conf.json

@@ -67,7 +67,7 @@
         "resizable": true,
         "fullscreen": false,
         "decorations": false,
-        "transparent": false,
+        "transparent": true,
         "minWidth": 600,
         "minHeight": 520
       }

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,
+});