dioprism-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.

Release Status

Current crate version: 0.1.0-alpha.5.
Release wave: June 8, 2026 workspace integration update.
Publish status: Prepared as a crates.io update for this package.
Scope: Dioxus components and native metadata for no-reload theme switching.
The README install examples and local workspace dependency requirements are aligned with this publish wave.

API Syntax Gallery

Generated from the crate's rustdoc JSON so the visible syntax tracks the public API surface used for DX review.

Checked Import Smoke Test

extern crate dioprism_theme as api;

fn main() {
    let _ = core::any::type_name::<api::ThemeRuntimeMode>();
}

`crate root`

Modules

pub mod prelude;
pub mod dx;

Re-exports

pub use dioprism_theme_core::DEFAULT_THEME_ANIMATION_SPEED as DEFAULT_THEME_ANIMATION_SPEED;
pub use dioprism_theme_core::DEFAULT_THEME_ANIMATION_SPEED_STORAGE_KEY as DEFAULT_THEME_ANIMATION_SPEED_STORAGE_KEY;
pub use dioprism_theme_core::DEFAULT_THEME_ANIMATION_STORAGE_KEY as DEFAULT_THEME_ANIMATION_STORAGE_KEY;
pub use dioprism_theme_core::DEFAULT_THEME_ATTRIBUTE as DEFAULT_THEME_ATTRIBUTE;
pub use dioprism_theme_core::DEFAULT_THEME_DURATION_MS as DEFAULT_THEME_DURATION_MS;
pub use dioprism_theme_core::DEFAULT_THEME_EASING as DEFAULT_THEME_EASING;
pub use dioprism_theme_core::DEFAULT_THEME_RUNTIME_BASE_PATH as DEFAULT_THEME_RUNTIME_BASE_PATH;
pub use dioprism_theme_core::DEFAULT_THEME_RUNTIME_PATH as DEFAULT_THEME_RUNTIME_PATH;
pub use dioprism_theme_core::DEFAULT_THEME_RUNTIME_VERSION as DEFAULT_THEME_RUNTIME_VERSION;
pub use dioprism_theme_core::DEFAULT_THEME_STORAGE_KEY as DEFAULT_THEME_STORAGE_KEY;
pub use dioprism_theme_core::DEFAULT_THEME_TARGET as DEFAULT_THEME_TARGET;
pub use dioprism_theme_core::MAX_THEME_ANIMATION_SPEED as MAX_THEME_ANIMATION_SPEED;
pub use dioprism_theme_core::MIN_THEME_ANIMATION_SPEED as MIN_THEME_ANIMATION_SPEED;
pub use dioprism_theme_core::THEME_CHANGE_EVENT as THEME_CHANGE_EVENT;
pub use dioprism_theme_core::THEME_TOKEN_ACCENT as THEME_TOKEN_ACCENT;
pub use dioprism_theme_core::THEME_TOKEN_BACKGROUND as THEME_TOKEN_BACKGROUND;
pub use dioprism_theme_core::THEME_TOKEN_BG as THEME_TOKEN_BG;
pub use dioprism_theme_core::THEME_TOKEN_FG as THEME_TOKEN_FG;
pub use dioprism_theme_core::THEME_TOKEN_MUTED as THEME_TOKEN_MUTED;
pub use dioprism_theme_core::THEME_TOKEN_PANEL as THEME_TOKEN_PANEL;
pub use dioprism_theme_core::THEME_TOKEN_PANEL_BORDER as THEME_TOKEN_PANEL_BORDER;
pub use dioprism_theme_core::THEME_TOKEN_SURFACE as THEME_TOKEN_SURFACE;
pub use dioprism_theme_core::THEME_TOKEN_SURFACE_BORDER as THEME_TOKEN_SURFACE_BORDER;
pub use dioprism_theme_core::THEME_TOKEN_TEXT as THEME_TOKEN_TEXT;
pub use dioprism_theme_core::THEME_VISUAL_TOKEN_MANIFEST_VERSION as THEME_VISUAL_TOKEN_MANIFEST_VERSION;
pub use dioprism_theme_core::THEME_VISUAL_TOKENS as THEME_VISUAL_TOKENS;
pub use dioprism_theme_core::ThemeAnim as ThemeAnim;
pub use dioprism_theme_core::ThemeAnimationMode as ThemeAnimationMode;
pub use dioprism_theme_core::ThemeAnimationPreset as ThemeAnimationPreset;
pub use dioprism_theme_core::ThemeCfg as ThemeCfg;
pub use dioprism_theme_core::ThemeColorScheme as ThemeColorScheme;
pub use dioprism_theme_core::ThemeConfig as ThemeConfig;
pub use dioprism_theme_core::ThemeDef as ThemeDef;
pub use dioprism_theme_core::ThemeDefinition as ThemeDefinition;
pub use dioprism_theme_core::ThemeMotion as ThemeMotion;
pub use dioprism_theme_core::ThemePreset as ThemePreset;
pub use dioprism_theme_core::ThemeReducedMotion as ThemeReducedMotion;
pub use dioprism_theme_core::ThemeReg as ThemeReg;
pub use dioprism_theme_core::ThemeRegistry as ThemeRegistry;
pub use dioprism_theme_core::ThemeValidationCode as ThemeValidationCode;
pub use dioprism_theme_core::ThemeValidationIssue as ThemeValidationIssue;
pub use dioprism_theme_core::ThemeValidationReport as ThemeValidationReport;
pub use dioprism_theme_core::ThemeValidationSeverity as ThemeValidationSeverity;
pub use dioprism_theme_core::ThemeVisualTokenDefinition as ThemeVisualTokenDefinition;
pub use dioprism_theme_core::ThemeVisualTokenManifest as ThemeVisualTokenManifest;
pub use dioprism_theme_core::ThemeVisualTokenRole as ThemeVisualTokenRole;
pub use dioprism_theme_core::default_themes as default_themes;
pub use dioprism_theme_core::is_safe_css_token_value as is_safe_css_token_value;
pub use dioprism_theme_core::is_valid_theme_attribute as is_valid_theme_attribute;
pub use dioprism_theme_core::is_valid_theme_target as is_valid_theme_target;
pub use dioprism_theme_core::normalize_animation_speed as normalize_animation_speed;
pub use dioprism_theme_core::theme as theme;
pub use dioprism_theme_core::theme_def as theme_def;
pub use dioprism_theme_core::theme_id as theme_id;
pub use dioprism_theme_core::theme_tokens_css as theme_tokens_css;
pub use dioprism_theme_core::theme_visual_token_css_var as theme_visual_token_css_var;
pub use dioprism_theme_core::theme_visual_token_manifest as theme_visual_token_manifest;
pub use dioprism_theme_core::theme_visual_token_manifest_json as theme_visual_token_manifest_json;
pub use dioprism_theme_core::themes as themes;
pub use ThemeAnimationSelect as AnimSelect;
pub use ThemeAnimationSpeedSlider as SpeedSlider;
pub use ThemeProvider as Theme;
pub use ThemeSelect as Select;
pub use ThemeToggle as Toggle;

Free Functions

theme_component_manifest(config: &ThemeConfig, policy: &dioprism_theme_core::ThemeRoutePolicy) -> dioprism_theme_core::ThemeManifestFragment
theme_component_explain(config: &ThemeConfig, policy: &dioprism_theme_core::ThemeRoutePolicy) -> dioprism_theme_core::ThemeExplainReport
theme_native_integration_hints(config: &ThemeConfig, policy: &dioprism_theme_core::ThemeRoutePolicy) -> std::collections::BTreeMap<String, String>
theme_runtime_mode(config: &ThemeConfig) -> ThemeRuntimeMode
theme_native_fallback_config() -> ThemeConfig
theme_native_compatibility_manifest() -> dioprism_native_port::VisualCompatibilityManifest
theme_native_package_actions(route: Option<&str>) -> Vec<dioprism_native_port::NativePackageAction>
theme_native_action(config: &ThemeConfig, action: ThemeNativeAction, current_theme: impl Into<String>) -> dioprism_native_port::NativeActionResult
use_theme(config: ThemeConfig) -> dioprism_native_port::PortableStorage
ThemeProvider(props: ThemeProviderProps) -> Element
ThemeToggle(props: ThemeToggleProps) -> Element
ThemeSelect(props: ThemeSelectProps) -> Element
ThemeAnimationSelect(props: ThemeAnimationSelectProps) -> Element
ThemeAnimationSpeedSlider(props: ThemeAnimationSpeedSliderProps) -> Element

Types, Variants, Fields, and Methods

pub enum ThemeRuntimeMode { ... }
variants: BrowserRuntime, StaticFallback
pub enum ThemeNativeAction { ... }
variants: ToggleTheme, SetTheme, CycleTheme, SetAnimationPreset, SetAnimationSpeed
methods:
  value.as_str() -> &'static str
  value.label() -> &'static str
pub struct ThemeProviderProps { ... }
fields:
  .config: ThemeConfig
  .class: String
  .children: Element
methods:
  ThemeProviderProps::builder() -> ThemeProviderPropsBuilder<((), (), ())>
pub struct ThemeToggleProps { ... }
fields:
  .handler: String
  .label: String
  .class: String
  .next_theme: String
methods:
  ThemeToggleProps::builder() -> ThemeTogglePropsBuilder<((), (), (), ())>
pub struct ThemeSelectProps { ... }
fields:
  .config: ThemeConfig
  .handler: String
  .class: String
  .label: String
methods:
  ThemeSelectProps::builder() -> ThemeSelectPropsBuilder<((), (), (), ())>
pub struct ThemeAnimationSelectProps { ... }
fields:
  .config: ThemeConfig
  .handler: String
  .class: String
  .label: String
methods:
  ThemeAnimationSelectProps::builder() -> ThemeAnimationSelectPropsBuilder<((), (), (), ())>
pub struct ThemeAnimationSpeedSliderProps { ... }
fields:
  .config: ThemeConfig
  .handler: String
  .class: String
  .label: String
  .min: u16
  .max: u16
  .step: u16
methods:
  ThemeAnimationSpeedSliderProps::builder() -> ThemeAnimationSpeedSliderPropsBuilder<((), (), (), (), (), (), ())>

`prelude`

Re-exports

pub use crate::AnimSelect as AnimSelect;
pub use crate::Select as Select;
pub use crate::SpeedSlider as SpeedSlider;
pub use crate::Theme as Theme;
pub use crate::ThemeAnim as ThemeAnim;
pub use crate::ThemeAnimationMode as ThemeAnimationMode;
pub use crate::ThemeAnimationPreset as ThemeAnimationPreset;
pub use crate::ThemeCfg as ThemeCfg;
pub use crate::ThemeColorScheme as ThemeColorScheme;
pub use crate::ThemeConfig as ThemeConfig;
pub use crate::ThemeDef as ThemeDef;
pub use crate::ThemeDefinition as ThemeDefinition;
pub use crate::ThemePreset as ThemePreset;
pub use crate::ThemeProvider as ThemeProvider;
pub use crate::ThemeReducedMotion as ThemeReducedMotion;
pub use crate::ThemeReg as ThemeReg;
pub use crate::ThemeRegistry as ThemeRegistry;
pub use crate::ThemeSelect as ThemeSelect;
pub use crate::ThemeToggle as ThemeToggle;
pub use crate::Toggle as Toggle;
pub use crate::default_themes as default_themes;
pub use crate::theme as theme;
pub use crate::theme_component_explain as theme_component_explain;
pub use crate::theme_component_manifest as theme_component_manifest;
pub use crate::theme_def as theme_def;
pub use crate::theme_id as theme_id;
pub use crate::theme_native_integration_hints as theme_native_integration_hints;
pub use crate::themes as themes;
pub use dioprism_theme_core::prelude::*;

`dx`

Re-exports

pub use dioprism_motion_core::dx::DurationDx as DurationDx;
pub use dioprism_theme_core::ThemeMotion as ThemeMotion;
pub use crate::prelude::*;

Type Aliases

pub type MotionPreset = dioprism_theme_core::ThemeAnimationPreset;

Free Functions

theme_cfg() -> dioprism_theme_core::ThemeConfig
theme(id: impl AsRef<str>) -> dioprism_theme_core::ThemeDefinition
motion() -> dioprism_theme_core::ThemeMotion

Types, Variants, Fields, and Methods

pub trait ThemeDefinitionDx { ... }
  fn dark(self: Self) -> Self;
  fn light(self: Self) -> Self;
pub trait ThemeConfigDx { ... }
  fn default(self: Self, theme: impl AsRef<str>) -> Self;

Install

[dependencies]
dioprism-theme = "0.1.0-alpha.5"

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, built-in token constants, and visual-token manifest helpers.

Controls

use dioxus::prelude::*;
use dioprism_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

Visual Token Interop

dioprism-theme re-exports the semantic token contract used by visual packages:

use dioprism_theme::{theme_visual_token_manifest, THEME_CHANGE_EVENT, THEME_TOKEN_ACCENT};

let manifest = theme_visual_token_manifest();
assert_eq!(THEME_CHANGE_EVENT, "dioprism-theme:change");
assert!(manifest.tokens.iter().any(|token| token.css_var == THEME_TOKEN_ACCENT));

The browser runtime includes tokens, visualTokens, and visualTokenCssVars in every dioprism-theme:change event, so Shader palettes, HoverFX sand/texture colors, and TextFX gradient colors can react to theme changes without page reload.

use dioprism_theme::{THEME_TOKEN_ACCENT, THEME_TOKEN_MUTED, THEME_TOKEN_SURFACE, THEME_TOKEN_TEXT};

let shader_palette = [THEME_TOKEN_ACCENT, THEME_TOKEN_SURFACE, THEME_TOKEN_MUTED];
let hoverfx_sand = [THEME_TOKEN_SURFACE, THEME_TOKEN_ACCENT];
let textfx_gradient = [THEME_TOKEN_ACCENT, THEME_TOKEN_TEXT, THEME_TOKEN_MUTED];

[data-dxh-effect="sand"] {
  --dxh-sand-color: var(--dxt-panel);
  --dxh-sand-highlight: var(--dxt-accent);
}

.dxt-effect-gradient-shift {
  --dxt-gradient-a: var(--dxt-accent);
  --dxt-gradient-b: var(--dxt-fg);
  --dxt-gradient-c: var(--dxt-muted);
}

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.

Integration Recipes

The component prelude includes the core integration helpers for route manifests, asset-budget categories, and migration planning:

use dioprism_theme::prelude::*;

let config = theme_cfg().with_default_theme("dark");
let policy = theme_route_policy().route("/settings");
let manifest = theme_component_manifest(&config, &policy);
let plan = theme_workertown_offload_plan(&config, &policy);

assert_eq!(manifest.package, "dioprism-theme");
assert!(plan.tasks.iter().any(|task| task == "serialize-token-css"));

Prefer the package-prefixed theme_* helper names for integration code. Component aliases such as Theme, Toggle, Select, AnimSelect, and SpeedSlider are intended for RSX-facing code.

Workspace package dependencies:

dioprism-native-port
dioprism-theme

Feature Flags

default: web
desktop: dioxus/desktop
native: dioxus/native, dioprism-native-port/native
server: dioxus/server
viewtx: forwards the optional dioprism-theme/viewtx interop feature
web: dioxus/web, dioprism-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

dioprism-theme 0.2.0-alpha.1

dioprism-theme

Release Status

API Syntax Gallery

Checked Import Smoke Test

crate root

Modules

Re-exports

Free Functions

Types, Variants, Fields, and Methods

prelude

Re-exports

dx

Re-exports

Type Aliases

Free Functions

Types, Variants, Fields, and Methods

Install

What It Provides

Controls

Visual Token Interop

Native Metadata

Integration Recipes

Feature Flags

License

`crate root`

`prelude`

`dx`