Generateur de theme

Creer un theme

Personnalisez les jetons de couleur OKLCH et le rayon, previsualisez le changement sur de vrais composants, puis exportez le theme comme bloc de variables CSS, une commande npx shadcn add ou des jetons de design. Votre theme est enregistre dans l'URL afin que vous puissiez le partager.

Theme

Choisissez un theme pour recolorer tout le site, puis affinez les tokens ci-dessous. Votre choix est conserve sur tout le site.

Rayon de bordure

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

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1445 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1445 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.1445 0 0);
  --primary: oklch(0.2044 0 0);
  --primary-foreground: oklch(0.9848 0 0);
  --secondary: oklch(0.9703 0 0);
  --secondary-foreground: oklch(0.2044 0 0);
  --muted: oklch(0.9703 0 0);
  --muted-foreground: oklch(0.5555 0 0);
  --accent: oklch(0.9703 0 0);
  --accent-foreground: oklch(0.2044 0 0);
  --destructive: oklch(0.6368 0.2078 25.326);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.9219 0 0);
  --input: oklch(0.9219 0 0);
  --ring: oklch(0.1445 0 0);
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(0.9848 0 0);
  --card: oklch(0.1445 0 0);
  --card-foreground: oklch(0.9848 0 0);
  --popover: oklch(0.1445 0 0);
  --popover-foreground: oklch(0.9848 0 0);
  --primary: oklch(0.9848 0 0);
  --primary-foreground: oklch(0.2044 0 0);
  --secondary: oklch(0.2686 0 0);
  --secondary-foreground: oklch(0.9848 0 0);
  --muted: oklch(0.2686 0 0);
  --muted-foreground: oklch(0.7153 0 0);
  --accent: oklch(0.2686 0 0);
  --accent-foreground: oklch(0.9848 0 0);
  --destructive: oklch(0.3959 0.1331 25.721);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.2686 0 0);
  --input: oklch(0.2686 0 0);
  --ring: oklch(0.8697 0 0);
}

The quick brown fox

Jumps over the lazy dog. This preview uses your live theme tokens.

BadgeSecondaryOutlineDestructive

Upgrade your plan

Unlock unlimited projects and priority support.

Cards use the card, border, and muted tokens together.