Lib.rs

🌗 leptos-theme

leptos-theme 无需额外工作即可轻松地在您的 leptos 应用程序之间切换亮暗模式。

快速开始

您可以用两行代码设置暗模式

使用 <ThemeProvider /> 包裹您的项目

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

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

现在您的 HomePage 和 ErrorPage 已经为暗模式做好了准备！

使用 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>
}

就这样！

功能

• 选择类或数据属性选择器
• 使用 prefers-color-scheme 与系统首选项保持一致
• 在多个选项卡和窗口中保持主题一致性

演示

leptos_theme 支持类和数据属性选择器。

• 有关 tailwind + 类选择器的演示： https://leptos-theme.vercel.app/

  • 指南

• 有关纯 CSS + 数据选择器的演示： https://leptos-theme-data-attribute.vercel.app/

  • 指南

贡献

查看 问题页面 并随时提交 PR！

错误、问题、功能请求

Robert 和我创建 leptos_theme 的目的是为了提高可用性。如果您遇到任何错误、问题或功能请求，请随时 提交问题。

更新日志

更新 - v.1.2 2024年2月8日

• 将 leptos 升级到 0.6.5