WASM Theme

A simple rust library to set CSS data-theme on the html element with WASM. Compatible with tailwindcss and daisyUI. The user's preferred data-theme is saved in local storage as the theme variable.

It respects a browsers prefers-color-scheme if sent and no theme variable is set in local storage.

Support for checkbox/toggle, radio-buttons, buttons, and/or select.

Using with tailwindcss

@import"tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Using with daisyUI

@import"tailwindcss";
@plugin"daisyui" {
themes: light --default, dark --prefersdark, cupcake;
};

Dioxus Usage

Checkbox/toggle

use wasm_theme::theme_toggle;#[component]fnApp() -> Element{use_effect(move || {theme_toggle();});rsx!{
...
SomeComponent{}}}#[component]pubfnSomeComponent() -> Element{input{r#type:"checkbox",name:"theme-toggle",// unchecked value will be `light`, checked value will be `dark`value:"light,dark",// or `value: "dark",` if you want the unchecked value to be `default`}}

Radio buttons

use wasm_theme::theme_radio;#[component]fnApp() -> Element{use_effect(move || {theme_radio();});rsx!{
...
SomeComponent{}}}#[component]pubfnSomeComponent() -> Element{label{
input {r#type:"radio",name:"theme-radios",value:"default",}"Default"}label{
input {r#type:"radio",name:"theme-radios",value:"light",}"Light"}
label {input{r#type:"radio",name:"theme-radios",value:"dark",}"Dark"}label{
input {r#type:"radio",name:"theme-radios",value:"cupcake",}"Cupcake"}}

Buttons

use wasm_theme::theme_buttons;#[component]fnApp() -> Element{use_effect(move || {theme_buttons();});rsx!{
...
SomeComponent{}}}#[component]pubfnSomeComponent() -> Element{button{name:"theme-button",value:"light",
"Light"
}button{name:"theme-button",value:"dark",
"Dark"
}button{name:"theme-button",value:"cupcake",
"Cupcake"
}}

Select

use wasm_theme::theme_select;#[component]fnApp() -> Element{use_effect(move || {theme_select();});rsx!{
...
SomeComponent{}}}#[component]pubfnSomeComponent() -> Element{select{name:"theme-select",option{ value:"default", "Default" }
option {value:"light","Light"}
option {value:"dark","Dark"}
option {value:"cupcake","Cupcake"}}}