Core

@themvora/core

Vanilla JSRuntimeSSR-safe20 exports

The framework-agnostic heart of Themvora: store, model, registry, runtime, adapters, generation, validation and more.

Verified with Themvora 2.0.0·Updated 2026-09-17

Prerequisites

Package Manager

npm, pnpm, yarn, or bun

Dependencies

None — this is the core package

Use Case

Framework-agnostic runtime and tooling

Installation

View on npm ↗Source ↗

Install the framework-agnostic core directly.

bash

pnpm add @themvora/core

Quick Start

Complete copy-paste usage for this package.

vanilla.ts

TS / JS

import { Themvora } from "@themvora/core/vanilla";

const kit = new Themvora();
kit.setMode("dark");
kit.setFamily("plum");
kit.toggleTheme();
kit.update({ colors: { primary: "#07f" } });
kit.use({ name: "brand", themes: customThemes });
kit.toCSSVariables();
kit.on("themeChange", (theme) => console.log(theme.name));
kit.destroy();

More Examples

Additional patterns for Core.

generate.ts

TS / JS

import { generateTheme } from "@themvora/core";

const { light, dark } = generateTheme({ seed: "#6366f1", family: "indigo" });

// Validate a full theme against required tokens
const result = validateTheme(dark, { themes: [light, dark] });
// { valid: boolean, issues: [{ type, path, message }] }

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/core.

Store & Model

Export	Description
`createThemeStore`	Minimal reactive store — get / set / subscribe / batch / destroy.
`defineTheme`	Type-safe, zero-cost theme definition helper.
`extendTheme / composeTheme`	Inherit from a base theme and override, or merge multiple definitions.
`mergeThemeDefinitions / mergeTokens`	Low-level merge utilities.
`resolveTheme`	Resolve a theme definition, following `extends` chains.

Registry

Export	Description
`createThemeRegistry`	Registry of every registered theme.
`register / registerMany / unregister / replace`	Manage registered themes at runtime.
`getFamilies / getThemesByFamily`	Query themes by family.

Runtime

Export	Description
`createThemeRuntime`	Wires store, registry, selection, persistence, broadcast, DOM bindings, history, lifecycle and plugins.
`runtime.update(tokens)`	Live theme editing — merge partial tokens into the active theme.
`runtime.use(pack)`	Install a theme pack at runtime.
`runtime.history`	Undo / redo / jump through full theme snapshots.
`runtime.snapshot / restore`	Serialize and restore full runtime state.
`runtime.lifecycle`	Typed event bus for theme changes.

Tooling

Export	Description
`generateTheme`	Generate a complete light + dark pair from a seed color.
`validateTheme`	Validate required semantic color tokens.
`migrateTheme / registerMigration`	Version themes with a migration chain.
`getBuiltInThemes`	Neutral, preset, brand and accessibility themes.
`flattenTokens / resolveTokens`	Token resolution with references, expressions and derived colors.
`getContrastRatio / simulateCVD`	Accessibility toolkit — WCAG contrast and color-vision-deficiency simulation.

Next steps

View Full API

Complete generated reference with all signatures and types

→

Framework Integration

Choose your framework and get started

→

Explore Examples

See real-world implementations and patterns

→

Core

@themvora/core

Vanilla JSRuntimeSSR-safe20 exports

The framework-agnostic heart of Themvora: store, model, registry, runtime, adapters, generation, validation and more.

Verified with Themvora 2.0.0·Updated 2026-09-17

Prerequisites

Package Manager

npm, pnpm, yarn, or bun

Dependencies

None — this is the core package

Use Case

Framework-agnostic runtime and tooling

Installation

View on npm ↗Source ↗

Install the framework-agnostic core directly.

bash

pnpm add @themvora/core

Quick Start

Complete copy-paste usage for this package.

vanilla.ts

TS / JS

import { Themvora } from "@themvora/core/vanilla";

const kit = new Themvora();
kit.setMode("dark");
kit.setFamily("plum");
kit.toggleTheme();
kit.update({ colors: { primary: "#07f" } });
kit.use({ name: "brand", themes: customThemes });
kit.toCSSVariables();
kit.on("themeChange", (theme) => console.log(theme.name));
kit.destroy();

More Examples

Additional patterns for Core.

generate.ts

TS / JS

import { generateTheme } from "@themvora/core";

const { light, dark } = generateTheme({ seed: "#6366f1", family: "indigo" });

// Validate a full theme against required tokens
const result = validateTheme(dark, { themes: [light, dark] });
// { valid: boolean, issues: [{ type, path, message }] }

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/core.

Store & Model

Export	Description
`createThemeStore`	Minimal reactive store — get / set / subscribe / batch / destroy.
`defineTheme`	Type-safe, zero-cost theme definition helper.
`extendTheme / composeTheme`	Inherit from a base theme and override, or merge multiple definitions.
`mergeThemeDefinitions / mergeTokens`	Low-level merge utilities.
`resolveTheme`	Resolve a theme definition, following `extends` chains.

Registry

Export	Description
`createThemeRegistry`	Registry of every registered theme.
`register / registerMany / unregister / replace`	Manage registered themes at runtime.
`getFamilies / getThemesByFamily`	Query themes by family.

Runtime

Export	Description
`createThemeRuntime`	Wires store, registry, selection, persistence, broadcast, DOM bindings, history, lifecycle and plugins.
`runtime.update(tokens)`	Live theme editing — merge partial tokens into the active theme.
`runtime.use(pack)`	Install a theme pack at runtime.
`runtime.history`	Undo / redo / jump through full theme snapshots.
`runtime.snapshot / restore`	Serialize and restore full runtime state.
`runtime.lifecycle`	Typed event bus for theme changes.

Tooling

Export	Description
`generateTheme`	Generate a complete light + dark pair from a seed color.
`validateTheme`	Validate required semantic color tokens.
`migrateTheme / registerMigration`	Version themes with a migration chain.
`getBuiltInThemes`	Neutral, preset, brand and accessibility themes.
`flattenTokens / resolveTokens`	Token resolution with references, expressions and derived colors.
`getContrastRatio / simulateCVD`	Accessibility toolkit — WCAG contrast and color-vision-deficiency simulation.