# 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
```toml
[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
```rust
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](https://github.com/Collin-Budrick/dioxus_template/blob/main/LICENSE-MIT))
- Apache License, Version 2.0 ([LICENSE-APACHE](https://github.com/Collin-Budrick/dioxus_template/blob/main/LICENSE-APACHE))
Repository: <https://github.com/Collin-Budrick/dioxus_template>