ThemePlugin not defined

[MatthewScholefield]

The exact code on the README doesn't seem to work:

use tauri_plugin_theme::ThemePlugin;

error[E0432]: unresolved import `tauri_plugin_theme::ThemePlugin`
 --> src/main.rs:4:5
  |
4 | use tauri_plugin_theme::ThemePlugin;
  |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ no `ThemePlugin` in the root

I had to change it to:

use tauri_plugin_theme;

Not sure if this is something that changed in the new version but afterwards everything works great!

[wyhaya]

@MatthewScholefield This is just a documentation error, I forgot to change README.md.

If you are using Tauri v1

tauri_plugin_theme::ThemePlugin::init(ctx.config_mut());

If you are using Tauri v2

tauri_plugin_theme::init(ctx.config_mut());

[wyhaya]

Note: A new version was released an hour ago. To avoid confusion, both v1 and v2 use the same API.

# For tauri@v1
cargo add tauri-plugin-theme@1

# For tauri@v2
cargo add tauri-plugin-theme@2

let mut ctx = tauri::generate_context!();
tauri::Builder::default()
    // ...
    .plugin(tauri_plugin_theme::init(ctx.config_mut()))
    // ...
    .run(ctx)
    // ...

[Yanyan99999]

when i use the theme on vue3, and code below:
async function getSystemTheme() {
const theme = await invoke('plugin:theme|theme')
console.log(theme)
} ; these code did not work, is there something wrong?

[wyhaya]

when i use the theme on vue3, and code below: async function getSystemTheme() { const theme = await invoke('plugin:theme|theme') console.log(theme) } ; these code did not work, is there something wrong?

async function getSystemTheme() {
-   const theme = await invoke('plugin:theme|theme')
+   const theme = await invoke("plugin:theme|get_theme");
    console.log(theme)
} ; 

[Yanyan99999]

It works but all i get the theme is auto, even i changed it to dark. btw my system is redhat 9, and tauri v1, theme-plugin-theme@0.2.0

and i also tried to listen theme-changed, seems no response. code like below:

listen('tauri://theme-changed', (event) => {
const payload = event.payload as{theme: string}
console.log('theme change to:', payload.theme)
}); something wrong here?

[wyhaya]

@Yanyan99999

It works but all i get the theme is auto, even i changed it to dark.

# 1.
invoke("plugin:theme|set_theme", {theme: 'dark'})
# 2.
$ cat ~/.config/{YOUR_APP_ID}/tauri-plugin-theme
# 3.
const theme = invoke("plugin:theme|get_theme")

# 4.
invoke("plugin:theme|set_theme", {theme: 'light'})
# 5.
$ cat ~/.config/{YOUR_APP_ID}/tauri-plugin-theme
# 6.
const theme = invoke("plugin:theme|get_theme")

The results of 2 and 3 should be the same, and the results of 5 and 6 should also be the same. Please check and see what you can find.

and i also tried to listen theme-changed, seems no response. code like below:

This plugin does not send events to Tauri. If you need to get the currently used theme, please use the following code:

const medie = window.matchMedia('(prefers-color-scheme: dark)')
medie.addEventListener('change', () => {
    const theme = medie.matches ? 'dark' : 'light'
})