dioxus-theme

Dioxus components and native metadata for no-reload theme switching.

This crate is part of the Dioxus SSR package workspace. The APIs are pre-1.0 and may change between releases while the package family stabilizes.

Install

[dependencies]
dioxus-theme = "0.1.0-alpha.1"

What It Provides

• ThemeProvider, ThemeToggle, ThemeSelect, ThemeAnimationSelect, and ThemeAnimationSpeedSlider components.
• use_theme storage hook backed by the native-port storage adapter.
• Native package action metadata for theme, animation preset, and animation speed controls.
• Re-exports for core config, animation presets, validation types, and built-in token constants.

Controls

use dioxus::prelude::*;
use dioxus_theme::{
    ThemeAnimationPreset, ThemeAnimationSelect, ThemeAnimationSpeedSlider, ThemeConfig,
    ThemeProvider, ThemeSelect, ThemeToggle,
};

#[component]
fn Settings() -> Element {
    let config = ThemeConfig::default()
        .with_animation_preset(ThemeAnimationPreset::MaskedWave)
        .with_animation_speed(100);

    rsx! {
        ThemeProvider { config: config.clone(),
            ThemeToggle { class: "theme-button" }
            ThemeSelect { config: config.clone(), class: "theme-select" }
            ThemeAnimationSelect { config: config.clone(), class: "theme-select" }
            ThemeAnimationSpeedSlider { config, class: "theme-slider" }
        }
    }
}

The controls render SSR-safe HTML using data-dxr-on-* resumability attributes. They include stable ids, accessible labels, aria-live current labels, and slider output text. The default handler ids are:

• theme.toggle
• theme.set
• theme.cycle
• theme.animation
• theme.animation-speed

Native Metadata

Use theme_native_package_actions(route) to advertise native-port actions for non-web shells. theme_native_action returns the configured storage keys, active animation preset, animation speed, and fallback mode so native hosts can mirror the same controls.

Workspace package dependencies:

• dioxus-native-port
• dioxus-theme-core

Feature Flags

• default: web
• desktop: dioxus/desktop
• native: dioxus/native, dioxus-native-port/native
• server: dioxus/server
• viewtx: forwards the optional dioxus-theme-core/viewtx interop feature
• web: dioxus/web, dioxus-native-port/web

License

Licensed under either of:

• MIT license (LICENSE-MIT)
• Apache License, Version 2.0 (LICENSE-APACHE)

Repository: https://github.com/Collin-Budrick/dioxus_template