Skip to main content

use_theme

Function use_theme 

Source
pub fn use_theme<'hook>(
    key: String,
) -> impl 'hook + Hook<Output = UseThemeHandle>
Expand description

A hook to manage light/dark theme with persistence and system preference support.

§Example

use yew_hooks::prelude::*;

#[function_component(UseTheme)]
fn theme() -> Html {
    let theme = use_theme("example_theme".to_string());

    let onclick = {
        let theme = theme.clone();
        Callback::from(move |_| theme.toggle())
    };

    html! {
        <>
            <button {onclick}>
                { if theme.is_dark() { "Switch to light" } else { "Switch to dark" } }
            </button>
            <p>{ format!("Active theme: {}", *theme) }</p>
        </>
    }
}
  • key: the localStorage key to persist the user’s preference. If not present, the hook follows system preference.

Returns a UseThemeHandle that can be used to read the current theme and switch it.

§Note

When used in function components and hooks, this hook is equivalent to:

/// A hook to manage light/dark theme with persistence and system preference support.
///
/// # Example
///
/// ```rust
/// # use yew::prelude::*;
/// #
/// use yew_hooks::prelude::*;
///
/// #[function_component(UseTheme)]
/// fn theme() -> Html {
///     let theme = use_theme("example_theme".to_string());
///
///     let onclick = {
///         let theme = theme.clone();
///         Callback::from(move |_| theme.toggle())
///     };
///
///     html! {
///         <>
///             <button {onclick}>
///                 { if theme.is_dark() { "Switch to light" } else { "Switch to dark" } }
///             </button>
///             <p>{ format!("Active theme: {}", *theme) }</p>
///         </>
///     }
/// }
/// ```
///
/// - `key`: the localStorage key to persist the user's preference. If not present, the hook follows system preference.
///
/// Returns a `UseThemeHandle` that can be used to read the current theme and switch it.
pub fn use_theme(key: String) -> UseThemeHandle {
    /* implementation omitted */
}