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");
}
Top comments (0)