@themvora/core · Vanilla

Imported from the @themvora/core/vanilla subpath. Avoids React dependency entirely and exposes the same runtime, DOM, CSS-variable, and transition machinery through a Themvora facade.

Generated from packages/core/src by apps/docs/scripts/generate-api-reference.mjs. Do not edit by hand — run pnpm --filter @themvora/docs api:generate.

Functions

generateTheme(options): GeneratedThemePair

Generate a cohesive light/dark theme pair from a single seed color.

Light and dark are generated independently from the same identity — the dark theme is not an inversion of the light one — so the brand hue survives the mode change. Every semantic pair is solved to the contrast contract with a safety margin before the theme is returned, and the seed is recorded in meta.generation as provenance.

See also: validateTheme, defineTheme

Returns GeneratedThemePair — A { light, dark } pair of theme definitions sharing one family.

const { light, dark } = generateTheme({ seed: "#d97706", family: "brand" });

Classes

class Themvora

Framework-free drop-in theming with @themvora/core.

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

const kit = new Themvora();
kit.setMode("dark");
kit.setFamily("plum");
kit.on("themeChange", (theme) => console.log(theme.name));

Interfaces

GeneratedThemePair

The light and dark themes produced by generateTheme.

GenerateThemeOptions

Options for generateTheme.

ProvidedThemeFamily<T extends ThemeDefinition>

A discoverable theme family: every variant the provider was given for one canonical family, in the order they were supplied.

See also: normalizeProvidedThemes, createProvidedThemesSource

const themes = useProvidedThemes();

return themes.map((family) => (
  <fieldset key={family.id}>
    <legend>{family.name}</legend>
    {family.variants.map((variant) => (
      <button key={variant.name} onClick={() => setTheme(variant.name)}>
        {variant.mode}
      </button>
    ))}
  </fieldset>
));

ProvidedThemeVariant<T extends ThemeDefinition>

One variant of a theme family: a single registered theme definition.

See also: ProvidedThemeFamily

ThemeDefinition<Name extends ThemeName>

A theme definition: a name plus optional metadata and token values.

See also: defineTheme, extendTheme, composeTheme

ThemeOverrideSelection

A family/mode request. Either field may be omitted; the omitted one is taken from the selection the provider would otherwise have used.

See also: ThemeOverride

ThemeRegistry<T extends ThemeDefinition>

A collection of registered theme definitions with deduplication, inheritance-ready metadata stamps, and family queries.

The registry stores theme definitions; resolution of extends chains and token references happens separately via resolveTheme.

ThemeTokens

Semantic token values consumed by the runtime.

Top-level groups map to CSS variable namespaces (--theme-color-*, --theme-spacing-*, …) when bound to the DOM by the runtime.

See also: themeToCSSVariables, resolveTokens

ThemvoraOptions

Options for creating a Themvora instance.

Type Aliases

ProvidedThemeProvenance

Provenance a theme definition declares about itself.

Only markers the library itself writes are read — meta.generation.kind for generator output and a pack:<name> tag for an installed theme pack. Nothing is inferred from a theme's name, family or colours: a theme called mint-light is not thereby a preset.

See also: ProvidedThemeFamily.provenance

{ algorithm: string; kind: "generated" } | { kind: "pack"; pack: string }

ThemeMode

The color-mode dimension of a theme selection.

• "light" and "dark" are explicit modes.
• "system" follows the visitor's prefers-color-scheme preference and resolves to "light" or "dark" at selection time.

"light" | "dark" | "system"

ThemeOverride<Name extends string>

An explicit theme override.

Three equivalent ways to name the same thing:

• a variant ("mint-dark") applies exactly that definition,
• a family ("mint") applies the variant the provider resolves for the mode already in effect,
• a family/mode object ({ family: "mint", mode: "dark" }) states both.

All three are resolved against the provider's own registry through resolveThemeReference, so an override cannot name a theme the provider does not have, and the family form cannot pick "whichever variant came first".

See also: resolveThemeOverride, themeOverrideKey

Name | ThemeOverrideSelection

// `themes` is the registry the provider was given.
const themes = getBuiltInThemes();

<ThemeProvider themes={themes} themeOverride="mint-dark">{children}</ThemeProvider>
<ThemeProvider themes={themes} themeOverride="mint">{children}</ThemeProvider>
<ThemeProvider themes={themes} themeOverride={{ family: "mint" }}>{children}</ThemeProvider>

ThemePack<T extends ThemeDefinition>

A named collection of theme definitions installable as a group.

Themes installed through use receive a pack:<name> tag and replace any existing theme with the same name.

void

Related docs

• Themes — A theme is a named, immutable definition of semantic tokens with light/dark variants that the runtime resolves and applies.
• Theme Discovery & Overrides — A provider exposes exactly the themes it was given — grouped by family, with variants and resolved tokens — and accepts an explicit one-shot themeOverride that outranks a saved selection.
• Runtime — One runtime per app owns the store, selection, registry, history, lifecycle and adapters; every framework binding is a thin view over it.
• Theme generation — Generate a complete, accessible light/dark theme pair from a single seed color, ready to drop into the runtime.