8 个版本

0.2.0	2024 年 2 月 7 日
0.1.6	2023 年 11 月 1 日
0.1.4	2023 年 10 月 30 日

1706 在网页编程

每月 39 次下载

MIT 许可证

12KB
82 行

Leptos Darkmode 辅助包

Tailwind CSS 深色模式辅助包是一个 Rust 包，为使用 Leptos 构建的网页应用程序提供管理深色模式功能的方便工具。它允许您轻松设置和获取深色模式状态，并将其保存在网页浏览器的本地存储中。

Leptos 兼容性

包版本	兼容的 Leptos 版本
<= 0.1	0.5
0.2	0.6

安装

将 Darkmode 辅助包添加到您的 Cargo.toml 文件中

[dependencies]
leptos_darkmode = "0.2"

使用

在您的基于 Leptos 的项目中，您可以使用 Darkmode 辅助包轻松管理深色模式功能。这是使用 Tailwind CSS 类策略，而不是媒体策略。这需要在 tailwind.config.js 中启用

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // ...
}

之后，您可以在 html 中切换 dark 类，如下所示。

初始化

要开始，您需要初始化 Darkmode 辅助包。这应在您的应用程序中仅执行一次。init 函数将读取本地存储中的当前深色模式状态（如果存在）；否则，它将根据用户的系统首选项确定默认状态。

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    let darkmode = Darkmode::init();
    // The dark mode state is now initialized and set.

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

        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>

        // This set's the darkmode tag on the html class, if the darkmode is enabled
        <Html lang="en" class=move || if darkmode.is_dark() { "dark" } else { "" }/>

        // Set your tailwindcss theme, for example the background color of the body
        <Body class="bg-white dark:bg-gray-800"/>

        // Your router code
    }
}

切换深色模式

您可以使用 toggle 方法轻松切换深色模式状态。这将切换深色和浅色模式，并在本地存储中更新状态以实现持久性。

#[component]
fn navbar() {
    let mut darkmode = expect_context::<Darkmode>();

    view! {
        // Toggle the dark mode state
        <button on:click=move |_| darkmode.toggle()>Toggle Darkmode</button>
    }
}

设置深色和浅色模式

如果您想显式设置深色或浅色模式，可以使用 set_dark 和 set_light 方法。这些方法将更新状态并在本地存储中持久化。

#[component]
fn settings() {
    let mut darkmode = expect_context::<Darkmode>();

    view! {
        // Set dark mode explicitly
        <button on:click=move |_| darkmode.set_dark()>Set Darkmode</button>

        // Set light mode explicitly
        <button on:click=move |_| darkmode.set_light()>Set Lightmode</button>
    }
}

获取当前模式

您可以使用 get、is_dark 或 is_light 方法检查当前模式。这些方法对于深色模式返回 true，对于浅色模式返回 false。

fn main() {
    let darkmode = expect_context::<Darkmode>();

    // Check if it's dark mode
    let is_dark_mode = darkmode.is_dark();

    // Check if it's light mode
    let is_light_mode = darkmode.is_light();
}

许可证

leptos_darkmode 采用 MIT 许可协议发布。更多信息，请参阅 LICENSE 文件。

依赖项

约 19-31MB
约 510K SLoC