Dark Mode

Three dark mode strategies: System, Light, or Dark.

DarkMode Options

Mode	Behavior
System	Follows OS preference via `prefers-color-scheme` media query
Light	Always light mode
Dark	Always dark mode

System Mode (Recommended)

app.rs

use stratum_leptos::{ThemeContext, provider::DarkMode};

let ctx = ThemeContext::new(
    Theme::default(),
    DarkMode::System,
);
// Generates both :root and @media (prefers-color-scheme: dark)
let css = ctx.css_variables();

How It Works

Every ColorToken in the theme has separate light and dark values. When generating CSS variables:

Light mode: emits :root { --stratum-color-*: light_value; }
Dark mode: emits .dark { --stratum-color-*: dark_value; }
System mode: emits both, with dark values inside @media (prefers-color-scheme: dark)

Palette colors (gray-100 through pink-900) are mode-independent — they provide a fixed 9-step scale for both modes.

Runtime Toggle

toggle.rs

// Toggle between light and dark at runtime
let (dark, set_dark) = create_signal(false);

view! {
    <ThemeProvider
        theme=Theme::default()
        dark_mode=move || if dark() { DarkMode::Dark } else { DarkMode::Light }
    >
        <Switch on_change=move |v| set_dark(v)>
            "Dark mode"
        </Switch>
        <App />
    </ThemeProvider>
}

Next: CLI →