How to listen to theme change event in rust

[liyasthomas]

Are there any events emitted on Rust side when set_theme is called from front-end?

Something like:

window.on_window_event(move |event| {
	if let tauri::WindowEvent::ThemeChanged(theme) = event {
		println!("Theme changed!");
	}
});

[wyhaya]

Are there any events emitted on Rust side when set_theme is called from front-end?

No.

Currently, there is no good solution in Rust, but you can listen for theme changes in JavaScript and then send a notification.

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

#[command]
fn theme_changed(theme: &str) {
    println!("Theme changed!");
}

[liyasthomas]

I'm trying to set a custom inset to the traffic lights position using this plugin. But using tauri-plugin-theme seems to be resetting the custom inset on every theme change.

Even tho, I got it slightly working with the above implementation, but the traffic lights seem to be flickering a bit in between theme change.

Here's a demo of flickering:

Screen.Recording.2024-07-11.at.8.32.08.AM.mov

[wyhaya]

Even tho, I got it slightly working with the above implementation, but the traffic lights seem to be flickering a bit in between theme change.

There is a certain delay in notifications between JavaScript and Rust, which is not a good approach.

---

You should complete the traffic lights position setup after the theme change and before the next render, but this seems to be beyond the scope of this plugin.

If you’re willing, you can fork this repo and then modify platform/macos.rs:

#[command]
pub fn set_theme<R: Runtime>(app: AppHandle<R>, theme: Theme) -> Result<(), &'static str> {
    save_theme_value(&app.config(), theme);
    for window in app.windows().values() {
        let ptr = window.ns_window().map_err(|_| "Invalid window handle")?;
        unsafe {
            let val = match theme {
                Theme::Auto => nil,
                Theme::Light => NSAppearance(NSAppearanceNameVibrantLight),
                Theme::Dark => NSAppearance(NSAppearanceNameVibrantDark),
            };
            (ptr as id).setAppearance(val);
        }
+       crate::traffic_light_positioner_plugin::setup_traffic_light_positioner(window.clone());
    }
    Ok(())
}

traffic_light_positioner_plugin.mov

---

[wyhaya]

For your use case, implementing on top of Tauri would be best, but it’s not yet complete.

tauri-apps/tao#513
tauri-apps/tauri#4789