Function leptos_use::use_css_var

pub fn use_css_var(
    prop: impl Into<MaybeSignal<String>>,
) -> (ReadSignal<String>, WriteSignal<String>)

Manipulate CSS variables.

Demo

Link to Demo

Usage

let (color, set_color) = use_css_var("--color");

set_color.set("red".to_string());

The variable name itself can be a Signal.

let (key, set_key) = create_signal("--color".to_string());
let (color, set_color) = use_css_var(key);

You can specify the element that the variable is applied to as well as an initial value in case the variable is not set yet. The option to listen for changes to the variable is also available.

let el = create_node_ref::<Div>();

let (color, set_color) = use_css_var_with_options(
    "--color",
    UseCssVarOptions::default()
        .target(el)
        .initial_value("#eee")
        .observe(true),
);

view! {
    <div node_ref=el>"..."</div>
}

Server-Side Rendering

On the server this simply returns create_signal(options.initial_value).