@udixio/theme

@udixio/theme is the low-level engine that powers all Udixio theming. Most developers use defineConfig from @udixio/tailwind and the runtime adapter appropriate to their framework, such as ThemeProvider from @udixio/ui-react.

Use @udixio/theme when you need to:

• Generate theme CSS outside of React (Vite plugin, Node script, build step)
• Create a custom palette derivation algorithm (custom variant)
• Build a custom plugin that reads computed color tokens
• Access the raw HCT values of any semantic color token

Package responsibilities

Architecture

The core is a dependency-injection container (bootstrap()) that assembles four modules:

Context      — holds sourceColor, isDark, contrastLevel, variant
PaletteApi   — derives hue+chroma palettes from Context
ColorApi     — resolves semantic tokens (primary, surface…) from Palette tones
PluginApi    — executes plugins in order, each reading from ColorApi

Context-dependent palettes and colors are refreshed when their dependencies change; plugins consume the current values when api.load() runs. Most Color values therefore remain lazy until a property such as hex or tone is read.

loader()

The main entry point for headless usage:

import { loader } from '@udixio/theme';

const api = await loader(config, load);

• config — the core @udixio/theme ConfigInterface; unlike defineConfig, it does not accept the flat Tailwind or typography options
• load — boolean, default true — pass false to initialize without running the first load

See Using loader() for full usage examples.

Advanced pages