lovdaCN logo
Create
IntroductionInstallationThemingCLISkillsDark ModeAll BlocksAll Components

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