$lerpa --theme

Theming

Every color, edge, and accent in Lerpa UI is a CSS variable. Components never hard-code colors, so changing one :root block recolors the entire library — light and dark, in real time.

The token ladders

Tokens are organized as numbered ladders — a base value plus tints/shades you step through for depth and hierarchy.

--bg … --bg-4: Background surfaces, darkest (page) to lightest (raised cards, hovered chrome).
--text … --text-5: Foreground text, brightest (headings) to dimmest (disabled / faint meta).
--edge … --edge-3: Border / hairline colors, subtle to prominent.
--accent, --accent-soft, --accent-glow, --accent-d: The mono-accent: solid accent, a translucent fill, a glow for shadows, and a darker variant for hovers.
--pink, --amber, --cyan, --violet, --mint, --red: Supporting hues for status, charts, and accents.

How to theme

Override the variables in your global stylesheet. Because components read the variables, no component edits are needed.

globals.css

:root {
  /* mono-accent */
  --accent:      oklch(0.80 0.13 222);
  --accent-soft: oklch(0.80 0.13 222 / 0.15);
  --accent-glow: oklch(0.80 0.13 222 / 0.55);

  /* surfaces */
  --bg:   oklch(0.12 0.035 245);
  --bg-2: oklch(0.16 0.04 243);

  /* radius */
  --radius: 0.875rem;
}

Tokens use oklch() for perceptually uniform color, so adjusting lightness and chroma keeps contrast predictable across the ladder. Prebuilt presets (lime, mono, sunset, ocean, and more) ship as [data-theme="..."] blocks you can swap by setting the attribute on <html>.

Theme Studio

Don't want to hand-write tokens? The visual Theme Studio lets you pick an accent, background, and radius and watch the whole site recolor live — then export your theme as plain CSS variables, a Tailwind v4 @theme block, or a shadcn-style config to paste into your project.

— visual editorOpen Theme Studio →Recolor everything, export the CSS.— nextDark mode →How light/dark token switching works.