Theme

Provide theme tokens via context and expose CSS variables for consistent styling.

Provide theme

#[layout("/")]
fn AppLayout() -> View {
    provide_theme(Theme {
        mode: "dark".into(),
        primary: "#6366f1".into(),
        background: "#0b1020".into(),
        foreground: "#e6e8ee".into(),
    });

    view! {
        <div class="app" style={theme_css_vars(&use_theme())}>
            <Slot />
        </div>
    }
}

Consume in components

#[component]
fn ThemedButton() -> View {
    let theme = use_theme();
    view! {
        <button style={format!("background: {}", theme.primary)}>
            "Click"
        </button>
    }
}

Toggle mode

let dark = use_signal(true);

view! {
    <button onClick={ move |_| dark.update(|d| *d = !*d) }>
        "Toggle theme"
    </button>
}