ThemeStudio

ThemeStudio

<ax-theme-studio> is a Pro component: a live editor for the library’s design tokens. Edit colors in OKLCH (via the built-in ColorPicker), adjust radius / spacing / motion / font, preview the result across representative components, and copy or download a Tailwind v4 @theme {} block — with a .dark {} override for colors that differ in dark mode.

Like all Pro components it self-gates with a PRO watermark until a license key is provided via provideAxProLicense().

Import

import {
  AxThemeStudioComponent,
  AxTokenScopeDirective,
  type TokenDef,
  type TokenGroup,
  emitTheme,
} from '@axisui-ng/pro';

Usage

<!-- starts from the current theme (reads --color-* / --radius-* / … at runtime) -->
<ax-theme-studio ariaLabel="Theme studio" />

<!-- or seed it with an explicit token set -->
<ax-theme-studio [tokens]="myTokens" />

myTokens: TokenDef[] = [
  { name: '--color-primary', group: 'color', light: 'oklch(0.55 0.18 255)', dark: 'oklch(0.7 0.16 255)' },
  { name: '--radius-md', group: 'radius', light: '0.5rem' },
];

Inputs

Input	Type	Default	Notes
tokens	TokenDef[]	[]	Optional seed. When empty, the studio reads live theme tokens in the browser after first render.
ariaLabel	string	''	Group label; empty → 'Theme studio'.

TokenDef is { name: string; group: TokenGroup; light: string; dark?: string } where TokenGroup is 'color' | 'radius' | 'spacing' | 'motion' | 'font'. Only color tokens carry a separate dark value; other groups are shared across modes.

Related: [axTokenScope]

AxTokenScopeDirective applies a Record<string, string> of CSS custom properties onto its host (SSR-safe). The studio uses it for the live preview; you can reuse it for scoped token overrides.

Light / dark

A mode toggle switches which value color rows edit and flips the preview. The emitted CSS is a full @theme {} (light) plus a .dark {} block containing only the color tokens whose dark value differs. Use Copy / Download to take the CSS; Reset restores the seed (or runtime-read) baseline.

Accessibility

A labelled role="group". The mode toggle and Reset / Copy / Download are buttons; each token row’s control is labelled by token name; the emitted CSS is an aria-labelled read-only textarea. Edits and actions announce via a polite live region.

License

Pro component — see ProWatermark for how the watermark/gating works.

Storybook

Interactive examples live in Storybook under Pro / ThemeStudio. Run pnpm storybook to explore them.