shadcn/ui theme · dark original

Violet Night

A cosmic purple-to-pink pairing over deep space black — dramatic and premium, built for launch pages and hero moments.

darkpurplegradient

Install

npx shadcn@latest add https://csscreme.com/r/violet-night.json

Requires a project with shadcn/ui set up. Prefer to paste? The CSS variables are below.

Live preview

Revenue

Last 30 days across all workspaces.

Total

$48,210+12.4%

Active

1,204+3.1%

Churn

0.8%-0.2%

Workspace name

Tokens

:root {
  --background: oklch(98.8% 0.001 286.4);
  --foreground: oklch(23.2% 0.046 292.0);
  --card: oklch(97.1% 0.003 308.4);
  --card-foreground: oklch(23.2% 0.046 292.0);
  --popover: oklch(97.1% 0.003 308.4);
  --popover-foreground: oklch(23.2% 0.046 292.0);
  --primary: oklch(62.7% 0.233 303.9);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(97.7% 0.003 308.4);
  --secondary-foreground: oklch(23.2% 0.046 292.0);
  --muted: oklch(97.7% 0.003 308.4);
  --muted-foreground: oklch(52.4% 0.026 299.8);
  --accent: oklch(65.6% 0.212 354.3);
  --accent-foreground: oklch(15.2% 0.009 285.3);
  --destructive: oklch(62.6% 0.193 23.0);
  --destructive-foreground: oklch(15.2% 0.009 285.3);
  --border: oklch(83.3% 0.009 301.3);
  --input: oklch(83.3% 0.009 301.3);
  --ring: oklch(62.7% 0.233 303.9);
  --radius: 14px;
}

.dark {
  --background: oklch(16.4% 0.041 292.8);
  --foreground: oklch(94.3% 0.028 294.6);
  --card: oklch(21.1% 0.057 293.1);
  --card-foreground: oklch(94.3% 0.028 294.6);
  --popover: oklch(21.1% 0.057 293.1);
  --popover-foreground: oklch(94.3% 0.028 294.6);
  --primary: oklch(62.7% 0.233 303.9);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(19.4% 0.053 292.8);
  --secondary-foreground: oklch(94.3% 0.028 294.6);
  --muted: oklch(19.4% 0.053 292.8);
  --muted-foreground: oklch(66.8% 0.066 299.2);
  --accent: oklch(65.6% 0.212 354.3);
  --accent-foreground: oklch(15.2% 0.009 285.3);
  --destructive: oklch(62.6% 0.193 23.0);
  --destructive-foreground: oklch(15.2% 0.009 285.3);
  --border: oklch(32.2% 0.048 297.2);
  --input: oklch(32.2% 0.048 297.2);
  --ring: oklch(62.7% 0.233 303.9);
}

Tailwind v4

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius: var(--radius);
}

Colors are OKLCH. Contrast is checked in both modes: foreground on background, on cards, and button labels on the primary fill.

Where this came from

Themes here aren't randomised swatches — they start life as a palette in our design layer, studied against real interfaces. See the Violet Night palette for the full role breakdown, font pairing and spacing scale, or browse the showcase and breakdowns the palettes are drawn from.

Font pairing Sora headings · Inter body · Radius 14px