Theming

Control light and dark mode, density, and programmatic token overrides with SpryProvider and createSpryTheme.

Color mode

SpryInnovation maps semantic colors to CSS variables. Use useSpry (or useSpryTheme) to read and update the active theme; the root data-spry-theme attribute stays in sync.

Current theme: light

createSpryTheme & extendSpryTheme

Build a SpryThemeDefinition that sets existing --spry-* variables (for example primary, product, accent, and radius). Pass the definition to SpryProvider so the tree inherits your brand without forking components.

theme.ts
App shell

Tenant & remote JSON

Multi-tenant APIs can return JSON shaped like SpryTenantThemeConfig. Validate and convert it to a definition, or use fetchSpryTenantTheme for a single round trip. See Architecture → Remote & multi-tenant themes for the full pipeline.

Parse, fetch, or convert
React: load remote theme into SpryProvider

Live sandbox

Adjust primary (token strings)

Values come from @spry/tokens and are written to --spry-color-core-primary inside the sandbox only.