Usage

Programmatic access to theme tokens for non-CSS consumers like SVG, canvas, Vega, D3, maps, or chart libraries that need values in JavaScript instead of CSS custom property references.

import { useTheme } from '@astryx-vue/core/Theme'

const { mode, token, tokens } = useTheme()

const accent = token('--color-accent')
const categorical = tokens.value['--color-data-categorical-blue']

Best practices

Guidance	Practices
Do	Use tokens or token(name) when integrating theme colors into SVG attributes, canvas drawing, chart options, or other non-CSS configuration objects inside Vue components.
Do	Prefer CSS variables for ordinary component styling; use this hook only when JavaScript needs token values.
Do	Use data visualization tokens such as --color-data-categorical-blue for chart series instead of arbitrary UI colors.
Don't	Hardcode light/dark colors in data visualizations: resolve them through the current theme instead.
Don't	Assume the hook reflects every CSS cascade override. It resolves tokens for the current Theme mode; local media-surface overrides and arbitrary external CSS may not be represented.

Examples

Common configurations, variations, and states.

useTheme — Token Values

neutral · light Resolved token values

--color-accent

--color-background-surface

--color-text-primary

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