Themvora + UnoCSS
@themvora/unocss
Build-timeUnoCSSPresetRuntime vars
Expose Theme semantic tokens as UnoCSS utilities (`bg-primary`, `rounded-lg`) that reference live CSS variables.
Verified with Themvora 2.0.0·Updated 2026-09-17
Prerequisites
Core Package
@themvora/core (peer dependency)
Library Version
Compatible with UnoCSS v3+
Adapter Type
Build Time
What's Available
@themvora/unocss ships 3 exports in 2 categories. Click any export to reveal what it does and how to use it.
Preset
Types
Use Cases
The important features in practice — copy any of these straight into your app.
Use Themvora utilities
Utilities resolve to live --theme-* variables, so they update at runtime.
<div className="bg-primary text-primary-foreground rounded-lg shadow-md">
This button tracks the active theme.
</div>Generate a static theme
Resolve tokens to concrete rem/px/color values at build time.
import { createUnoTheme } from "@themvora/unocss";
import { getBuiltInThemes, resolveTheme } from "@themvora/core";
const themes = getBuiltInThemes();
const theme = createUnoTheme(resolveTheme(themes, "berry-dark"));
// theme.colors.primary === "#..."More Examples
Static UnoCSS theme objects for build-time generation.
import { createUnoTheme } from "@themvora/unocss";
import { getBuiltInThemes, resolveTheme } from "@themvora/core";
// A theme definition, not { family } — createUnoTheme takes an AdapterSource.
const themes = getBuiltInThemes();
const theme = createUnoTheme(resolveTheme(themes, "berry-dark"));
// theme.colors.primary === "#..."API Reference
Preset
| Export | Description |
|---|---|
presetThemvora() | UnoCSS preset mapping semantic tokens to utilities: bg-primary, text-foreground, border-border, rounded-lg, shadow-lg. Values reference --theme-* variables and update at runtime. |
createUnoTheme(source) | Returns a static UnoCSS theme object (colors, radii, shadows) with concrete values for build-time generation. |
Types
| Export | Description |
|---|---|
ThemeTokens | Re-exports the semantic token shape from @themvora/core. |