feat: Add vibrancy and configuration options

packages/desktop/Cargo.toml

@@ -36,6 +36,8 @@ tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 netdev = "0.24"
 regex = "1"
+window-vibrancy = "0.5.2"
+csscolorparser = "0.7.0"
 
 [target.'cfg(target_os = "windows")'.dependencies]
 komorebi-client = { git = "https://github.com/LGUG2Z/komorebi", tag = "v0.1.28" }

packages/desktop/src/config.rs

@@ -90,6 +90,15 @@ pub struct WidgetConfig {
   /// Whether the Tauri window frame should be transparent.
   pub transparent: bool,
 
+  /// Whether the window frame should have an effect
+  pub background_effect: Option<BackgroundEffect>,
+
+  // Background effect color (Windows 10 v1903+, no effect on Windows 7 or Windows 11)
+  pub background_effect_color: Option<String>,
+
+  // Background Dark on Mica (Windows only)
+  pub background_effect_mica_dark: Option<bool>,
+
   /// Where to place the widget. Add alias for `defaultPlacements` for
   /// compatibility with v2.3.0 and earlier.
   #[serde(alias = "defaultPlacements")]
@@ -161,6 +170,17 @@ pub enum MonitorSelection {
   Name(String),
 }
 
+#[derive(Clone, Debug, Deserialize, Serialize, PartialEq, ValueEnum)]
+#[clap(rename_all = "snake_case")]
+#[serde(rename_all = "snake_case")]
+pub enum BackgroundEffect {
+  None,
+  Blur, // For Windows
+  Acrylic, // For Windows
+  Mica, // For Windows
+  Vibrancy // For macOS; the string represents the material
+}
+
 #[derive(Debug)]
 pub struct Config {
   /// Handle to the Tauri application.

packages/desktop/src/widget_factory.rs

@@ -8,6 +8,7 @@ use std::{
 };
 
 use anyhow::Context;
+use csscolorparser::Color;
 use serde::Serialize;
 use tauri::{
   AppHandle, Manager, PhysicalPosition, PhysicalSize, WebviewUrl,
@@ -21,7 +22,10 @@ use tracing::{error, info};
 
 use crate::{
   common::{PathExt, WindowExt},
-  config::{AnchorPoint, Config, WidgetConfig, WidgetPlacement, ZOrder},
+  config::{
+    AnchorPoint, BackgroundEffect, Config, WidgetConfig, WidgetPlacement,
+    ZOrder,
+  },
   monitor_state::MonitorState,
 };
 
@@ -191,6 +195,8 @@ impl WidgetFactory {
         Self::to_asset_url(&html_path.to_unicode_string()).into(),
       );
 
+      let window_effect = &widget_config.background_effect;
+
       // Note that window label needs to be globally unique.
       let window = WebviewWindowBuilder::new(
         &self.app_handle,
@@ -254,6 +260,45 @@ impl WidgetFactory {
         widget_states.insert(state.id.clone(), state.clone());
       }
 
+      #[cfg(target_os = "windows")]
+      {
+        if let Some(window_effect) = &widget_config.background_effect {
+          if *window_effect != BackgroundEffect::None {
+            let color = if let Some(color_str) =
+              &widget_config.background_effect_color
+            {
+              let color = csscolorparser::parse(color_str)?.to_rgba8();
+              Some((color[1], color[2], color[3], color[4]))
+            } else {
+              Some((18, 18, 18, 125))
+            };
+
+            use window_vibrancy::{apply_acrylic, apply_blur, apply_mica};
+            match window_effect {
+              BackgroundEffect::Blur => {
+                if let Err(e) = apply_blur(&window, color) {
+                  error!("Failed to apply blur: {:?}", e);
+                }
+              }
+              BackgroundEffect::Acrylic => {
+                if let Err(e) = apply_acrylic(&window, color) {
+                  error!("Failed to apply acrylic: {:?}", e);
+                }
+              }
+              BackgroundEffect::Mica => {
+                let mica_dark = widget_config
+                  .background_effect_mica_dark
+                  .unwrap_or(false);
+                if let Err(e) = apply_mica(&window, Some(mica_dark)) {
+                  error!("Failed to apply mica: {:?}", e);
+                }
+              }
+              _ => {}
+            }
+          }
+        }
+      }
+
       self.register_window_events(&window, widget_id);
       self.open_tx.send(state)?;
     }