8 releases

0.2.0	Feb 7, 2024
0.1.6	Nov 1, 2023
0.1.4	Oct 30, 2023

#1360 in Web programming

MIT license

12KB
82 lines

Leptos Darkmode Helper

The Tailwind CSS Darkmode Helper is a Rust crate that provides a convenient tool for managing dark mode functionality in web applications built with Leptos. It allows you to easily set and get the dark mode state, and persist this state in the local storage of a web browser.

Leptos compatibility
Installation
Usage
License

Leptos compatibility

Crate version	Compatible Leptos version
<= 0.1	0.5
0.2	0.6

Installation

Add the Darkmode Helper crate to your Cargo.toml file:

[dependencies]
leptos_darkmode = "0.2"

Usage

In your Leptos-based project, you can use the Darkmode Helper to manage dark mode functionality easily. This is using the Tailwind CSS class strategy, instead of the media strategy. This needs to be enabled in the tailwind.config.js:

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

After that you can toggle the dark class in the html, as you can see below.

Initialization

To get started, you need to initialize the Darkmode Helper. This should be done only once in your application. The init function will read the current dark mode state from local storage if it exists; otherwise, it will determine the default state based on the user's system preference.

#[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
    }
}

Toggling Dark Mode

You can easily toggle the dark mode state using the toggle method. This will switch between dark and light modes and update the state in local storage for persistence.

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

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

Setting Dark and Light Modes

If you want to explicitly set the dark or light mode, you can use the set_dark and set_light methods. These methods will update the state and persist it in local storage.

#[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>
    }
}

Getting the Current Mode

You can check the current mode using the get, is_dark, or is_light methods. These methods return true for dark mode and false for light mode.

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();
}

License

leptos_darkmode is distributed under the MIT License. For more information, see the LICENSE file.

Dependencies

~20–33MB
~498K SLoC