Props

Name	Type	Default	Description
theme	ThemeDefinition	—	Theme from defineTheme().
mode	'light' | 'dark' | 'system'	'system'	Color mode. system follows the page and the OS.

Slots

Name	Description
default	Content that inherits this theme.

defineTheme

Field	Description
name	Theme name. Written to data-astryx-theme.
tokens	Semantic token overrides. A tuple is the light stop, then the dark stop. A listed name wins over a generated value.
localTokens	Values only this theme family uses, by full custom-property name. Names stay as written. A shared token name is refused.
color	Palette from an accent. Omit the accent to recolor only the neutrals.
typography	Fonts, and a type scale from base and ratio.
radius	Radius steps from base and multiplier.
motion	Durations from fast, medium, slow, and ratio.
components	Styles by theme target, <component-kebab>-<part>. The compiled sheet is css on the theme.
adaptations	Ordered rules that apply by width, pointer, contrast, or reduced motion. A later matching rule wins.
extends	Another theme from defineTheme(). Everything it resolved carries over. This theme's own values win.
syntax	Syntax colors for code in this subtree, unless a SyntaxTheme is closer.
onDark	Extra tokens and component styles for a dark MediaTheme surface.
onLight	Extra tokens and component styles for a light MediaTheme surface.
icons	Semantic icon name to Iconify id. Overrides by name and merges shallowly with the extended theme.
indicators	Indicator graphics, replaced by check, checkbox, or radio. One entry reaches every place that draws that name.

useTheme

useTheme() reads the nearest theme. Outside a Theme, the name is neutral and token() reads the document's custom properties. Values are the theme's root values; adaptation rules apply through CSS only. The returned object and token are created once, and tokens changes only when the theme or the mode does.

Field	Description
name	Nearest theme name.
mode	Resolved light or dark. system is resolved.
token(name)	One token for the effective mode. A local token is read by its exact name. A chart color nobody set falls back to its default.
tokens	Tokens and local tokens declared by the nearest theme, resolved for the effective mode.

Template ref

The component exposes element with type HTMLElement | null.

Native attributes

The root is a div with display: contents. class and style are applied to it. Other attributes are not forwarded.