Astryx Design System

useXDSTheme@xds/core v0.0.14 · useXDSTheme

Usage

Programmatic access to resolved XDS theme tokens. Use it for non-CSS consumers like SVG, canvas, Vega, D3, or chart libraries that need concrete values instead of CSS custom property references.

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

Best practices

Guidance	Practices
Do	Use token(name) when integrating theme colors into SVG, canvas, or chart configuration objects.
Do	Prefer CSS variables or StyleX tokens for ordinary component styling; use this hook when values must be read in JavaScript.
Don't	Hardcode light/dark colors in data visualizations — resolve them through the current theme instead.

Returns

Field	Type	Description
name	string	Name of the nearest XDS theme, or default when no provider is present.
mode	'light' \| 'dark'	Resolved effective color mode. system mode is resolved to light or dark.
token	(name: string) => string	Resolve a single design token to its concrete CSS value for the current mode.
tokens	Record<string, string>	All tokens resolved for the current mode, including defaults and theme overrides.

Examples

Common configurations, variations, and states.

useXDSTheme — Token Values

Read resolved theme token values with useXDSTheme for non-CSS consumers like SVG charts.