Function: toCssVars()

toCssVars(theme, options): CssVarsResult

Defined in: adapters/toCssVars.ts:102

Convert a ThemeTokensV2 into CSS custom properties scoped by data-attribute selectors.

Designed for runtime theme switching: generate one CSS block per theme/mode combination, include them all in your stylesheet, and switch themes by setting data-tt-theme and data-tt-mode attributes on the root element.

Parameters

theme

ThemeTokensV2

options

CssVarsOptions = {}

Returns

CssVarsResult

Example

import { themes, toCssVars } from '@ttoss/theme2';

// Default theme at :root
const defaultCss = toCssVars(themes.default).toCssString();

// Scoped by theme
const bruttalCss = toCssVars(themes.bruttal, { themeId: 'bruttal' }).toCssString();

// Scoped by theme + mode
const darkCss = toCssVars(darkTheme, {
  themeId: 'bruttal',
  mode: 'dark',
  colorScheme: 'dark',
}).toCssString();