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");
}