Theme Provider - HapplyUI

Dynamically override HapplyUI's primary color palette at runtime by providing a single base hex color. Uses OKLCH color space for perceptually uniform scale generation.

Installation

bunx @happlyui/cli@latest add theme-provider

Usage

import * as ThemeProvider from "@/components/ui/theme-provider"

<ThemeProvider.Root primaryColor="#7d52f4">
  {children}
</ThemeProvider.Root>

Examples

Scoped (default)

Wraps children in a div with CSS custom properties. Each provider can have a different primary color.

Purple (default)#7d52f4

Scale (950–50)

950

900

800

700

600

500

400

300

200

100

Semantic

base

dark

darker

light

lighter

Alpha

alpha-24

alpha-16

alpha-10

<ThemeProvider.Root primaryColor="#2563eb">
  <Button.Root variant="primary">Blue theme</Button.Root>
</ThemeProvider.Root>

Global

Applies the generated palette to :root, overriding the default theme globally.

Cyan (global scope)#0891b2

Scale (950–50)

950

900

800

700

600

500

400

300

200

100

Semantic

base

dark

darker

light

lighter

Alpha

alpha-24

alpha-16

alpha-10

<ThemeProvider.Root primaryColor="#2563eb" scope="global">
  <App />
</ThemeProvider.Root>

Multiple themes

Use scoped providers side by side to show different brand colors.

Rose#e11d48

Scale (950–50)

950

900

800

700

600

500

400

300

200

100

Semantic

base

dark

darker

light

lighter

Alpha

alpha-24

alpha-16

alpha-10

Blue#2563eb

Scale (950–50)

950

900

800

700

600

500

400

300

200

100

Semantic

base

dark

darker

light

lighter

Alpha

alpha-24

alpha-16

alpha-10

Green#16a34a

Scale (950–50)

950

900

800

700

600

500

400

300

200

100

Semantic

base

dark

darker

light

lighter

Alpha

alpha-24

alpha-16

alpha-10

Orange#ea580c

Scale (950–50)

950

900

800

700

600

500

400

300

200

100

Semantic

base

dark

darker

light

lighter

Alpha

alpha-24

alpha-16

alpha-10

<div className="flex gap-4">
  <ThemeProvider.Root primaryColor="#e11d48">
    <Button.Root variant="primary">Rose</Button.Root>
  </ThemeProvider.Root>
  <ThemeProvider.Root primaryColor="#2563eb">
    <Button.Root variant="primary">Blue</Button.Root>
  </ThemeProvider.Root>
</div>

API Reference

ThemeProvider.Root

Generates a full primary color scale from a hex color and injects CSS custom properties.

Prop	Type	Default	Description
`primaryColor`	`string`	-	Base hex color (e.g. '#7d52f4'). Used to generate the full 50–950 scale.
`scope`	`'global' \| 'scoped'`	`'scoped'`	Whether to apply vars to a wrapper div (scoped) or to :root (global).
`darkMode`	`'media' \| 'class' \| 'both'`	`'media'`	Strategy for detecting dark mode. 'media' uses prefers-color-scheme, 'class' watches for a .dark class on <html>.