tauri-plugin-theme 2.1.1

Dynamically change Tauri App theme
docs.rs failed to build tauri-plugin-theme-2.1.1
Please check the build logs for more information.
See Builds for ideas on how to fix a failed build, or Metadata for how to configure docs.rs builds.
If you believe this is docs.rs' fault, open an issue.
Visit the last successful build: tauri-plugin-theme-1.0.0

tauri-plugin-theme

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

https://github.com/wyhaya/tauri-plugin-theme/assets/23690145/2422ce95-418d-4f07-adf5-e78af2552f51

[!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 tauri-plugin-theme@2.1.1
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.