Themvora + Bootstrap

Pick your framework

The adapter writes Bootstrap's own CSS custom properties from Themvora semantic tokens, so Bootstrap'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 Bootstrap'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 bootstrap

pnpm add @themvora/core @themvora/react @themvora/bootstrap

How it works

Themvora writes Bootstrap's own CSS custom properties from its tokens, and Bootstrap'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

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

import { useThemeRuntime } from "@themvora/react";
import { useBootstrapTheme } from "@themvora/bootstrap/react";

export function InstallAdapter() {
  useBootstrapTheme(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/bootstrap/bootstrap.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 Bootstrap components

import "@themvora/bootstrap/bootstrap.css";

export function Example() {
  return (
    <div className="card">
      <div className="card-body">
        <h5 className="card-title">Themvora + Bootstrap</h5>
        <button type="button" className="btn btn-primary">Primary action</button>
      </div>
    </div>
  );
}

These are ordinary Bootstrap components. No Themvora-specific props are required — the theme reaches them through Bootstrap'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 { useBootstrapTheme } from "@themvora/bootstrap/react";
import "@themvora/bootstrap/bootstrap.css";

import { Example } from "./Example";

// No provider to mount: the hook registers the adapter, which writes
// Bootstrap's own CSS variables. The stylesheet import above applies them.
function ThemeZone() {
  useBootstrapTheme(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/bootstrap/bootstrap.css";

What's Available

@themvora/bootstrap 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 { createBootstrapAdapter } from "@themvora/bootstrap";

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

// The adapter is already registered — switching the mode
// repaints every --bs-* variable on the runtime:

runtime.selection.setMode("dark");
runtime.selection.setMode("light");

More Examples

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

import { createBootstrapVariables } from "@themvora/bootstrap";
import { getBuiltInThemes } from "@themvora/core";

// Pass the token set — a `{ family, mode }` pair is not a ThemeTokens and
// silently yields empty values ("--bs-body-bg": "").
const [theme] = getBuiltInThemes();

const css = createBootstrapVariables(theme.tokens!);
// css -> { "--bs-body-bg": "#f8fafc", "--bs-body-color": "#0f172a", … }

API Reference