Being a designer, I'm very particular about window decorations. This Tauri plugin (v2 only) is an opinionated take on titlebars that solves all my gripes with the default ones. It does so by:
- retaining most native features (like Windows Snap Layout)
- not feeling too disconnected from the rest of the app UI, by being transparent and blending in better
- offering custom inset for macOS traffic lights that are often not aligned well with the rest of the contents
For a full example app that uses this plugin, check out examples/tauri-app.
To install the plugin:
cargo add tauri-plugin-decorum
Usage in Tauri:
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt; // adds helper methods to WebviewWindow
fn main() {
tauri::Builder::default()
.plugin(tauri_plugin_decorum::init()) // initialize the decorum plugin
.setup(|app| {
// Create a custom titlebar for main window
// On Windows this hides decoration and creates custom window controls
// On macOS it needs hiddenTitle: true and titleBarStyle: overlay
let main_window = app.get_webview_window("main").unwrap();
main_window.create_overlay_titlebar().unwrap();
// Some macOS-specific helpers
#[cfg(target_os = "macos")] {
// Set a custom inset to the traffic lights
main_window.set_traffic_lights_inset(12.0, 16.0).unwrap();
// Make window transparent without privateApi
main_window.make_transparent().unwrap()
// Set window level
// NSWindowLevel: https://developer.apple.com/documentation/appkit/nswindowlevel
main_window.set_window_level(25).unwrap()
}
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
You'll also need to set these permissions for your window in src-tauri/capabilities/default.json
"window:allow-close",
"window:allow-center",
"window:allow-minimize",
"window:allow-maximize",
"window:allow-set-size",
"window:allow-set-focus",
"window:allow-start-dragging",
"decorum:allow-show-snap-overlay",
*there's probably a better way to handle plugin permissions that I haven't found yet. if you have, pls lmk!
You can customize the titlebar buttons by overriding the css like this:
/* style of all buttons */
button.decorum-tb-btn {
height: 24px !important;
&:hover {
background-color: rgba(0, 0, 0, 0.2) !important;
}
}
/* style of a button to minimize window */
button#decorum-tb-minimize {
}
/* style of a button to maximize window */
button#decorum-tb-maximize {
}
/* style of a button to close window */
button#decorum-tb-close {
&:hover {
background-color: rgba(255, 0, 255, 0.7) !important;
}
}
/* style of the whole tauri-decorum container */
div[data-tauri-decorum-tb] {
height: 24px !important;
}
PRs and issues welcome! Here's a short primer to get you started with development on this:
- Ensure you have all the Tauri prerequisites set up
- Clone this repo
- Use the example app as a test bed for your changes
There's some missing features I'd still like to add, all documented on the Issues page. In the long run though I hope the core team incorporates all these within Tauri and I look forward to making this plugin obsolete.
Meanwhile, I hope you find this useful. Happy building! 🥂