FnMut Clojure with thaw ui and leptos_dark

[bendo01]

hi,
i'm new in rust and leptos, i tried to build my own ui, trying to implement dark mode toggle button, i'm facing a problem, i'm using leptos_dark ( https://lib.rs/crates/leptos_darkmode ) but in the example it using mutable variable and when i tried to merge it with thaw example ( https://github.com/thaw-ui/thaw/blob/main/demo/src/components/site_header.rs )

// let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
    let change_theme = {
        // let mut mode_dark = dark_mode.clone();
        if theme_name.get_untracked() == "Light" {
            theme.set(Theme::light());
            // write_theme.set("light".to_string());
            // mode_dark.set_light();

        } else {
            theme.set(Theme::dark());
            // write_theme.set("dark".to_string());
            // mode_dark.set_dark();
        }
    };

source code: https://github.com/bendo01/xsia_leptos_ui_csr_v1_public/blob/main/src/app.rs

it give me an error because i'm combining mutable variable in clojure,
can anyone give me the right direction how to solve it?
thank you

[gbj]

When I try to compile your repo, I get this error

error[E0277]: the trait bound `(): Into<leptos::Callback<MouseEvent>>` is not satisfied
   --> src/app.rs:68:5
    |
68  | /     view! {
69  | |         <ThemeProvider theme>
70  | |             <main class="min-h-screen w-full bg-transparent ">
71  | |                 <LoaderComponent />
...   |
84  | |                                 on_click=change_theme
    | |                                 -------- ------------ this tail expression is of type `()`
    | |                                 |
    | |                                 required by a bound introduced by this call
...   |
109 | |         </ThemeProvider>
110 | |     }
    | |_____^ the trait `Fn(MouseEvent)` is not implemented for `()`, which is required by `(): Into<leptos::Callback<MouseEvent>>`

This says, change_theme is not a Fn(MouseEvent) -- rather, it's a () (the unit type, i.e., nothing).

This is because instead of making change_theme a closure, you have it as a block.

Change this:

    let change_theme =  {
        let mut mode_dark = dark_mode.clone();
        if theme_name.get_untracked() == "Light" {
            theme.set(Theme::light());
            // write_theme.set("light".to_string());
            mode_dark.set_light();
        } else {
            theme.set(Theme::dark());
            // write_theme.set("dark".to_string());
            mode_dark.set_dark();
        }
    };

to this

    let change_theme = move |_| {
        let mut mode_dark = dark_mode.clone();
        if theme_name.get_untracked() == "Light" {
            theme.set(Theme::light());
            // write_theme.set("light".to_string());
            mode_dark.set_light();
        } else {
            theme.set(Theme::dark());
            // write_theme.set("dark".to_string());
            mode_dark.set_dark();
        }
    };

and it compiles fine.

(This doesn't have anything to do with mixing mutable and immutable variables or anything -- it's essentially just a typo or syntax error, you've assigned a block that doesn't return anything instead of assigning a function to the variable)

[bendo01]

thank you for explanation