leptos_theme

🌗 leptos-theme

leptos-theme effortlessly toggles between light and dark modes in your leptos application.

Quick Start

You can set up dark mode with two lines:

Wrap your project with <ThemeProvider />:

view! {
    <Stylesheet id="leptos" href="/pkg/demo.css"/>

    <ThemeProvider>
        <Router>
            <Routes>
                <Route path="/" view=HomePage/>
                <Route path=":else" view=ErrorPage/>
            </Routes>
        </Router>
    </ThemeProvider>
}

Now your HomePage and ErrorPage are dark mode ready!

Toggle themes on-the-fly with use_theme():

use leptos_theme::{
    theme::use_theme, 
    types::Theme
};

// inside <HomePage />

let current_theme = use_theme();

view! {
    <button
        on:click=move |_| {
        theme_signal.set(Theme::Light);
    }>
        <p>Light Mode</p>
    </button>
}

That's it!

Features

• Choose between class or data attribute selectors
• Harmonize with system preferences using prefers-color-scheme
• Keep themes consistent across multiple tabs and windows

Demo

leptos_theme supports both class and data attribute selectors.

• For a tailwind + class selector demo: https://leptos-theme.vercel.app/

  • How to guide

• For a pure CSS + data selector demo: https://leptos-theme-data-attribute.vercel.app/

  • How to guide

Contributions

Check the issues page and feel free to post a PR!

Bugs, Issues, Feature Requests

Robert and I created leptos_theme with the intention of usability. If you encounter any bugs, issues, or feature requests, please feel free to open an issue.

CHANGELOG

Update - v.1.2 February 8th, 2024

• elevated leptos to 0.6.5