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