shadcn/ui theme · dark original

Cyberpunk Neon

Hot magenta and cyan on ink for high-energy, after-dark interfaces with maximum contrast.

darkcyberpunkvibrant

Install

npx shadcn@latest add https://csscreme.com/r/cyberpunk-neon.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.000 89.9);
  --foreground: oklch(25.1% 0.015 285.3);
  --card: oklch(97.3% 0.001 286.4);
  --card-foreground: oklch(25.1% 0.015 285.3);
  --popover: oklch(97.3% 0.001 286.4);
  --popover-foreground: oklch(25.1% 0.015 285.3);
  --primary: oklch(66.7% 0.249 356.7);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(97.9% 0.000 89.9);
  --secondary-foreground: oklch(25.1% 0.015 285.3);
  --muted: oklch(97.9% 0.000 89.9);
  --muted-foreground: oklch(53.1% 0.012 286.0);
  --accent: oklch(84.4% 0.146 209.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.6% 0.003 286.3);
  --input: oklch(83.6% 0.003 286.3);
  --ring: oklch(66.7% 0.249 356.7);
  --radius: 6px;
}

.dark {
  --background: oklch(14.7% 0.011 285.0);
  --foreground: oklch(97.2% 0.007 286.3);
  --card: oklch(20.1% 0.020 284.5);
  --card-foreground: oklch(97.2% 0.007 286.3);
  --popover: oklch(20.1% 0.020 284.5);
  --popover-foreground: oklch(97.2% 0.007 286.3);
  --primary: oklch(66.7% 0.249 356.7);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(18.2% 0.016 284.7);
  --secondary-foreground: oklch(97.2% 0.007 286.3);
  --muted: oklch(18.2% 0.016 284.7);
  --muted-foreground: oklch(59.1% 0.047 284.9);
  --accent: oklch(84.4% 0.146 209.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(28.7% 0.024 284.8);
  --input: oklch(28.7% 0.024 284.8);
  --ring: oklch(66.7% 0.249 356.7);
}

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 Cyberpunk Neon palette for the full role breakdown, font pairing and spacing scale, or browse the showcase and breakdowns the palettes are drawn from.

Font pairing Orbitron headings · Rajdhani body · Radius 6px