diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index bbf899a038e844187114d31e72c3120f0cdc7e39..143642a900d52aca91028d70e9f3410fcfc8ae4d 100644
--- a/src-tauri/Cargo.lock
+++ b/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"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 5df4a0ac375923e4b20c0f1db360c648bbc59bbe..70d52e9d54d7fc3427535d559c8f2a767d78c346 100644
--- a/src-tauri/Cargo.toml
+++ b/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"] }
diff --git a/src-tauri/src/core/verge.rs b/src-tauri/src/core/verge.rs
index 9a7eceaecd699d456b57a5df7aa00e49d97b2ab1..3a1077a2781b266fc7c67888c4b1857e94a5dceb 100644
--- a/src-tauri/src/core/verge.rs
+++ b/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() {
diff --git a/src-tauri/src/utils/resolve.rs b/src-tauri/src/utils/resolve.rs
index 1266f64d225619d2d94e9fd7caaedf28d9c00658..281fecbb62a47877c19393fb3942d90d6ae48ac7 100644
--- a/src-tauri/src/utils/resolve.rs
+++ b/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());
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 585a2de81bfa87a1452224785232757c68ab08a7..511eaef3084cc9ab7f6dd0c6de1d3c7b5048deea 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -67,7 +67,7 @@
"resizable": true,
"fullscreen": false,
"decorations": false,
- "transparent": false,
+ "transparent": true,
"minWidth": 600,
"minHeight": 520
}
diff --git a/src/components/setting-verge.tsx b/src/components/setting-verge.tsx
index 288fc8a6993f2f53008fbc6b40652861a2447c1c..5b275533f2d1101cc89e521c2d23cd8a1e642675 100644
--- a/src/components/setting-verge.tsx
+++ b/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
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index f5ea0191e9d27aea50168a0027354b2e434bfbbe..f9bee5e97b8e84e0e34a2eea2865c78407c42f90 100644
--- a/src/pages/_layout.tsx
+++ b/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
diff --git a/src/services/types.ts b/src/services/types.ts
index e7c91f57d54fd7196857c4ba855d31458fc65482..cc0e13b9032856da0e853bb145aba690e5e6e90a 100644
--- a/src/services/types.ts
+++ b/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;
}
diff --git a/src/states/setting.ts b/src/states/setting.ts
index 56ceffd2c8f02c24fa8b116072ca0082febe2540..e425e6ec8e3a639d32975870396940ca0ab0351c 100644
--- a/src/states/setting.ts
+++ b/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,
+});