2 releases

0.1.2 Feb 8, 2024
0.1.1 Jan 6, 2024
0.1.0 Jan 5, 2024

#2001 in Web programming

36 downloads per month

MIT license

10KB
101 lines

🌗 leptos-theme

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

crates version discord

Screen Shot 2024-01-05 at 3 58 18 PM

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.

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

Dependencies

~22–34MB
~540K SLoC