Themvora + Open Props

Pick your framework

The adapter writes Open Props's own CSS custom properties from Themvora semantic tokens, so Open Props's classes and components follow the active theme. Pick the framework you are building in — every snippet below follows that choice.

Installation

Two installs. The first is Open Props's own — see its installation guide if you need more than this. The second is Themvora, and it names the runtime package for React.

pnpm add open-props

pnpm add @themvora/core @themvora/react @themvora/open-props

How it works

Themvora writes Open Props's own CSS custom properties from its tokens, and Open Props's stylesheet consumes them. Nothing is rebuilt on a theme change — the variables change and the styles follow. That is why this adapter is a hook that registers a writer rather than a provider component, and why it also needs its stylesheet imported.

Quick Start

Open Props wired up for React. Switch the picker above and everything below changes with it.

import { useThemeRuntime } from "@themvora/react";
import { useOpenPropsTheme } from "@themvora/open-props/react";

export function InstallAdapter() {
  useOpenPropsTheme(useThemeRuntime());
  return null;
}

Mount the provider

Themvora's provider owns the active theme. Drop this at your app root — everything below it can read and change the theme, and the bridge above picks up each change automatically.

import { ThemeProvider } from "@themvora/react";
import "@themvora/open-props/open-props.css";

import { App as Page } from "./Page";
import { InstallAdapter } from "./components/InstallAdapter";

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <InstallAdapter />
      <Page />
    </ThemeProvider>
  );
}

Use Open Props components

import "@themvora/open-props/open-props.css";

export function Example() {
  return (
    <div className="surface">
      <h2>Themvora + Open Props</h2>
      <button className="primary">Primary action</button>
    </div>
  );
}

These are ordinary Open Props components. No Themvora-specific props are required — the theme reaches them through Open Props's own mechanism.

Theme switching

The point of an adapter is that this is the only code that changes — the components stay exactly as they are.

import { useTheme } from "@themvora/react";

export function ThemeControls() {
  const { setMode, toggleTheme } = useTheme();

  return (
    <>
      <button type="button" onClick={() => toggleTheme()}>Toggle</button>
      <button type="button" onClick={() => setMode("light")}>Light</button>
      <button type="button" onClick={() => setMode("dark")}>Dark</button>
    </>
  );
}

Before and after

A complete example

Everything together for React. Paste it in and it runs.

import { ThemeProvider, useThemeRuntime } from "@themvora/react";
import { useOpenPropsTheme } from "@themvora/open-props/react";
import "@themvora/open-props/open-props.css";

import { Example } from "./Example";

// No provider to mount: the hook registers the adapter, which writes
// Open Props's own CSS variables. The stylesheet import above applies them.
function ThemeZone() {
  useOpenPropsTheme(useThemeRuntime());

  return <Example />;
}

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <ThemeZone />
    </ThemeProvider>
  );
}

What gets mapped

Themvora owns the meaning; the adapter owns the vocabulary.

Include the CSS

The adapter ships a stylesheet that maps its component variables (e.g. --primary for shadcn/ui, --bs-primary for Bootstrap) to the themvora --theme-color-* tokens. Import it once — anywhere — and the library's components will respond to every theme change automatically.

import "@themvora/open-props/open-props.css";

What's Available

@themvora/open-props ships 6 exports in 2 categories. Click any export to reveal what it does and how to use it.

Use Cases

The important features in practice — copy any of these straight into your app.

import { createThemeRuntime } from "@themvora/core";
import { createOpenPropsAdapter } from "@themvora/open-props";

const runtime = createThemeRuntime();
runtime.adapters.use(createOpenPropsAdapter());

.banner {
  background: var(--op-primary);
  color: var(--op-on-primary);
  border-radius: var(--op-radius-md);
}

More Examples

Static variable maps for build-time CSS, and manual adapter lifecycle control.

import { createOpenPropsVariables } from "@themvora/open-props";
import { getBuiltInThemes } from "@themvora/core";

const [theme] = getBuiltInThemes();

const css = createOpenPropsVariables(theme.tokens!);
// css -> { "--color-canvas": "#f8fafc", "--color-text": "#0f172a", … }

API Reference