Themvora + daisyUI

Pick your framework

The adapter writes daisyUI's own CSS custom properties from Themvora semantic tokens, so daisyUI'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 daisyUI'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 daisyui tailwindcss @tailwindcss/vite

pnpm add @themvora/core @themvora/react @themvora/daisyui

How it works

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

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

import { useThemeRuntime } from "@themvora/react";
import { useDaisyTheme } from "@themvora/daisyui/react";

export function InstallAdapter() {
  useDaisyTheme(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/daisyui/daisyui.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 daisyUI components

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

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

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

import { Example } from "./Example";

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

What's Available

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

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

// The adapter is already registered — switch the family
// and every daisyUI variable updates to match:

runtime.selection.setFamily("mint");
runtime.selection.setFamily("plum");

More Examples

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

import { createDaisyVariables } from "@themvora/daisyui";
import { getBuiltInThemes } from "@themvora/core";

// Pass the token set — a `{ family, mode }` pair yields only the radius and
// border variables, with every color missing.
const [theme] = getBuiltInThemes();

const css = createDaisyVariables(theme.tokens!);
// css -> { "--color-base-100": "#f8fafc", "--color-primary": "…", … }

API Reference