Acrylic Window effect with Tauri

Today we'll look at how you can make a beautiful Acrylic window effect with Tauri, Nuxt and window-vibrancy (Remember rounded corners won't work).

You won't be able to drag/close/minimize your app after this
(still possible with the taskbar icon) because we have to remove the titlebar. To make it work again, you will have to make your own. I will upload a tutorial on how to do that soon.

Okay, first open tauri.conf.json and add "decorations": false,"transparent": true to "windows" in "tauri" like this:

"tauri": { "windows": [ { ... "decorations": false, "transparent": true } ], ... } 

After that, remove <NuxtWelcome /> from app.vue and add style tags:

<template> </template> <style> </style> 

In style make HTML and body full sized + transparent:

<style> * { margin: 0; padding: 0; } html, body { background-color: rgba(0, 0, 0, 10%); height: 100%; overflow: hidden; } </style> 

You should now see a black, transparent and empty window (ignore that thing at the bottom mid on my example).

Now let's get to the interesting part. To add the acrylic effect, open src-tauri/Cargo.toml and add window-vibrancy = "0.4.0" to [dependencies]:

[dependencies] serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } tauri = { version = "1.4.0", features = ["api-all"] } window-vibrancy = "0.4.0" 

Next, open src-tauri/src/main.rs (full code on GitHub) and do as follows:

Add this at the top of the file below the first 2 lines:

use tauri::Manager; use window_vibrancy::{apply_acrylic}; 

Finally, add this below tauri::Builder::default():

.setup(|app| { let window = app.get_window("main").unwrap(); apply_acrylic(&window, Some((0, 0, 0, 10))); Ok(()) }) 

Some((R, G, B, A)) is RGBA, so change it to what you prefer.

Ha, that was easy!

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

src-tauri/src/main.rs:

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] use tauri::Manager; use window_vibrancy::{apply_acrylic}; fn main() { tauri::Builder::default() .setup(|app| { let window = app.get_window("main").unwrap(); apply_acrylic(&window, Some((0, 0, 0, 10))); Ok(()) }) .run(tauri::generate_context!()) .expect("error while running tauri application"); }