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.
Table of Contents
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:
[]
= "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 =
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.
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.
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.
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.
License
leptos_darkmode
is distributed under the MIT License.
For more information, see the LICENSE file.