tauri-plugin-theme

Tauri currently doesn't support dynamically change app theme, this plugin makes up for that.

Preview.mp4

Note

This only applies to the Tauri 2x version. If you are using the Tauri 1x version, please refer to tauri-1x-version.

Install

cargo add [email protected]

let mut ctx = tauri::generate_context!();
tauri::Builder::default()
    // Init plugin and auto restore window theme !!!
    .plugin(tauri_plugin_theme::init(ctx.config_mut()))
    // ...
    .run(ctx)
    // ...

Tauri permissions

Add to src-tauri/capabilities/default.json

{
  ...
    "permissions": [
        ...
        "theme:default"
    ]
}

Usage

// Follow system theme setting
invoke("plugin:theme|set_theme", {
  theme: "auto",
});

// Always use light theme
invoke("plugin:theme|set_theme", {
  theme: "light",
});

// Always use dark theme
invoke("plugin:theme|set_theme", {
  theme: "dark",
});

// Get saved theme (default: auto)
const theme = await invoke("plugin:theme|get_theme");

When you call set_theme, the theme will be auto saved, and it will be restored auto after the App restart.

Support

MacOS	Linux	Windows	Android	iOS
✅	✅	✅	❌	❌

NOTE

For Windows

Requires WebView2 Runtime version 101.0.1210.39(May 9, 2022) or higher; otherwise, the app will complete the theme change by restart.

See: https://learn.microsoft.com/en-us/microsoft-edge/webview2/release-notes/archive?tabs=dotnetcsharp#10121039

For Linux

On Linux platform, it has not been extensively tested.