Theme customizer

Every Chocolate component reads the same OKLCH tokens as shadcn. Tune them here, then paste the CSS into your global stylesheet.

BadgeCaramelMintGlow

Monthly revenue

Tokens drive every surface.

Gradient text follows your accent

Move your pointer: the spotlight, glow and border use --glow and --caramel.

PricingHeroBentoTestimonialsFAQFooterDockBeam

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.007 45);
  --foreground: oklch(0.220 0.030 45);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.220 0.030 45);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.220 0.030 45);
  --primary: oklch(0.320 0.060 45);
  --primary-foreground: oklch(0.980 0.009 85);
  --secondary: oklch(0.950 0.015 80);
  --secondary-foreground: oklch(0.300 0.036 45);
  --muted: oklch(0.955 0.012 80);
  --muted-foreground: oklch(0.500 0.030 55);
  --accent: oklch(0.930 0.030 75);
  --accent-foreground: oklch(0.280 0.048 45);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.900 0.015 75);
  --input: oklch(0.900 0.015 75);
  --ring: oklch(0.620 0.120 65);
  --cocoa: oklch(0.320 0.060 45);
  --caramel: oklch(0.720 0.140 65);
  --cream: oklch(0.970 0.018 85);
  --mint: oklch(0.8 0.12 160);
  --glow: oklch(0.72 0.14 65 / 0.35);
}

.dark {
  --background: oklch(0.150 0.015 45);
  --foreground: oklch(0.950 0.015 85);
  --card: oklch(0.190 0.018 45);
  --card-foreground: oklch(0.950 0.015 85);
  --popover: oklch(0.190 0.018 45);
  --popover-foreground: oklch(0.950 0.015 85);
  --primary: oklch(0.780 0.130 70);
  --primary-foreground: oklch(0.180 0.030 45);
  --secondary: oklch(0.250 0.020 45);
  --secondary-foreground: oklch(0.950 0.015 85);
  --muted: oklch(0.240 0.020 45);
  --muted-foreground: oklch(0.680 0.024 70);
  --accent: oklch(0.280 0.030 55);
  --accent-foreground: oklch(0.950 0.015 85);
  --destructive: oklch(0.65 0.2 25);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.720 0.140 65);
  --cocoa: oklch(0.780 0.130 70);
  --caramel: oklch(0.800 0.140 70);
  --cream: oklch(0.950 0.015 85);
  --mint: oklch(0.82 0.13 160);
  --glow: oklch(0.8 0.14 65 / 0.3);
}