2 releases
0.1.2 | Feb 8, 2024 |
---|---|
0.1.1 | Jan 6, 2024 |
0.1.0 |
|
#2001 in Web programming
36 downloads per month
10KB
101 lines
🌗 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/
-
For a pure CSS + data selector demo: https://leptos-theme-data-attribute.vercel.app/
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