lovdaCN logo
Create
IntroductionInstallationThemingCLISkillsDark ModeAll Components
Beta modeInstall commands on this page use lovdacn@beta, which installs from the beta registry and may change before the stable release.What’s in beta

Theming

Using CSS variables and style packs for theming lvcn components.

lvcn uses CSS variables for theming, similar to shadcn/ui. Tokens live in your global CSS and map to Tailwind utilities via @theme.

Style packs

Each style controls radius, default font, and a default base color:

StyleRadiusDefault base
default0.5remslate
new-york0.5remzinc
luma0.75remneutral
lyra0.125remstone
maia1remneutral
mirapill (1.5rem)zinc
nova0.125remneutral
rheapill (1.5rem)neutral
sera0taupe
vega0.625remneutral

Base colors

Nine base palettes are available: zinc, slate, stone, gray, neutral, taupe, mauve, olive, mist.

Each palette includes light and dark tokens for:

background, foreground
card, card-foreground
popover, popover-foreground
primary, primary-foreground
secondary, secondary-foreground
muted, muted-foreground
accent, accent-foreground
destructive, destructive-foreground
border, input, ring

NativeWind projects use HSL CSS variables. Uniwind projects use oklch via @theme.

CSS variables

Example light theme tokens (oklch, Uniwind / docs site style):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0% 0 0);
  --primary: oklch(0% 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}

Dark mode uses the .dark class (or your color scheme hook on native):

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
}

Changing theme

  1. Re-run npx lovda init with a different style/base color, or
  2. Edit global.css tokens directly, or
  3. Update lvcn.json and re-add components if you need style-specific component source.

Utility helper

Components use the shared cn helper:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

See Dark Mode for enabling light/dark on Expo.

Previouslvcn.jsonNextCharts