Struct ThemeState 

pub struct ThemeState {
    pub theme: Signal<String>,
    pub root_class: Signal<String>,
}

Holds the reactive state for the application theme.

Provides the current theme signal and the derived root element class name signal that combines the app root class with the active theme class.

Fields

theme: Signal<String>

The current theme name signal (“light” or “dark”).

root_class: Signal<String>

The derived root element class name signal combining the app root class and the active theme class.

Implementations

impl ThemeState

Implementation of theme state functionality.

Provides methods for creating theme state, detecting system theme changes, and managing theme-related reactive state.

pub fn use_theme_state(mobile_signal: Signal<bool>) -> ThemeState

Creates theme state for managing light/dark mode and root CSS classes.

Detects the system color scheme preference at startup and initializes the theme signal accordingly. Uses watch! to reactively update the root class whenever the theme or mobile signal changes.

Arguments

• Signal<bool> - The reactive signal indicating whether the viewport is mobile-sized.

Returns

• ThemeState - The reactive theme state containing the theme signal and root class signal.

pub fn use_system_theme_change(theme_signal: Signal<String>)

Subscribes to system color scheme changes and updates the theme signal.

Creates a MediaQueryList for prefers-color-scheme: dark and listens for change events. When the system theme changes, the theme signal is updated accordingly. The listener is automatically cleaned up when the hook context is cleared.

Arguments

• Signal<String> - The theme signal to update when the system theme changes.

pub fn detect_system_theme() -> String

Detects the current system color scheme preference.

Uses window.matchMedia("(prefers-color-scheme: dark)") to check whether the operating system is in dark mode. Falls back to light theme if the detection fails.

Returns

• String - The detected system theme name (“light” or “dark”).

pub fn toggle(theme_signal: Signal<String>) -> Option<Rc<dyn Fn(Event)>>

Creates a click event handler that toggles the theme between “light” and “dark”.

The switch stays smooth even on pages with many elements (e.g. the list page) because individual components no longer carry their own colour (background / color / border-color) transitions — only the app root container animates its colour change, so the page fades as a whole while each component snaps to the new theme instantly. This avoids hundreds of elements running simultaneous colour transitions, which previously caused dropped frames.

Arguments

• Signal<String> - The theme signal to toggle.

Returns

• Option<Rc<dyn Fn(Event)>> - A click event handler that flips the theme value.

impl ThemeState

pub fn get_theme(&self) -> Signal<String>

pub fn get_mut_theme(&mut self) -> &mut Signal<String>

pub fn set_theme(&mut self, val: Signal<String>) -> &mut Self

pub fn get_root_class(&self) -> Signal<String>

pub fn get_mut_root_class(&mut self) -> &mut Signal<String>

pub fn set_root_class(&mut self, val: Signal<String>) -> &mut Self

impl ThemeState

pub fn new(theme: Signal<String>, root_class: Signal<String>) -> Self

Trait Implementations

impl Clone for ThemeState

fn clone(&self) -> ThemeState

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Copy for ThemeState