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>
    }
}

PWA colors from theme

FlowApp::new()
    .with_theme_pwa(Theme {
        primary: "#c9a962".into(),
        background: "#0a0908".into(),
        ..Default::default()
    })
    .auto_pages("src/pages", PagesRegistry)

PWA & static files.

Toggle mode

Use <Show when={dark}> with two theme_css_vars panels — try the live demo above.

let dark = signal(true);

view! {
    <Show when={dark} fallback={light_panel}>
        <div class="app" style={theme_css_vars(&dark_theme)}>...</div>
    </Show>
}