Astryx Design System

Theme@xds/core v0.0.14 · XDSTheme

Usage

Wraps a subtree with a specific XDS theme. For static production themes, use `npx xds theme build` and import the generated CSS plus built theme object for first-paint and SSR performance. Use runtime `defineTheme()` when themes are dynamic or for prototyping.

ts
import {XDSTheme} from '@xds/core/theme'

Best practices

Guidance	Practices
Do	Build app themes that are known ahead of time with `npx xds theme build`, then import the generated CSS and built theme object.
Do	Use runtime themes when the theme is created or edited in the browser, such as theme editors, user branding, or prototypes.
Don't	Default to runtime themes in SSR production apps. Component overrides inject after hydration instead of shipping as static CSS.

Examples

Common configurations, variations, and states.

Theme — Apply Theme

Wrap a subtree in XDSTheme to apply a theme to every child component in that region.

Theme — Nested Theme

Nested XDSTheme providers let a local region use a different theme without affecting the rest of the page.

Theme — Switch Themes

Use state to switch the theme object passed to XDSTheme and preview a different visual treatment.