Blog Guides Alternatives Compare

Dark shadcn dark mode theme

A sleek, dark-first shadcn theme with cool blue accents — great for dark mode dashboards.

Open in the editor Browse all themes

Install with the shadcn CLI

npx shadcn@latest add https://designrevision.com/r/themes/dark.json

Or copy the globals.css below and paste the :root / .dark blocks into your project.

Live preview

Light
The quick brown fox
Every element here is painted by the theme tokens.
Primary Secondary Outline Destructive
Badge Accent Muted
Overview
Dark
The quick brown fox
Every element here is painted by the theme tokens.
Primary Secondary Outline Destructive
Badge Accent Muted
Overview

globals.css

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0015 260);
  --foreground: oklch(0.205 0.0192 260);
  --card: oklch(0.995 0.0015 260);
  --card-foreground: oklch(0.205 0.0192 260);
  --popover: oklch(0.995 0.0015 260);
  --popover-foreground: oklch(0.205 0.0192 260);
  --primary: oklch(0.62 0.1892 260);
  --primary-foreground: oklch(0.205 0.0192 260);
  --secondary: oklch(0.968 0.0072 260);
  --secondary-foreground: oklch(0.205 0.0192 260);
  --muted: oklch(0.968 0.0072 260);
  --muted-foreground: oklch(0.5458 0.0292 260);
  --accent: oklch(0.96 0.0184 280);
  --accent-foreground: oklch(0.205 0.0192 280);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 260);
  --input: oklch(0.922 0.0072 260);
  --ring: oklch(0.62 0.1892 260);
  --chart-1: oklch(0.62 0.1492 260);
  --chart-2: oklch(0.68 0.1492 300);
  --chart-3: oklch(0.62 0.1492 340);
  --chart-4: oklch(0.68 0.1492 60);
  --chart-5: oklch(0.62 0.1492 140);
  --sidebar: oklch(0.995 0.0015 260);
  --sidebar-foreground: oklch(0.205 0.0192 260);
  --sidebar-primary: oklch(0.62 0.1892 260);
  --sidebar-primary-foreground: oklch(0.205 0.0192 260);
  --sidebar-accent: oklch(0.96 0.0184 280);
  --sidebar-accent-foreground: oklch(0.205 0.0192 280);
  --sidebar-border: oklch(0.922 0.0072 260);
  --sidebar-ring: oklch(0.62 0.1892 260);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 260);
  --foreground: oklch(0.985 0.0062 260);
  --card: oklch(0.205 0.0112 260);
  --card-foreground: oklch(0.985 0.0062 260);
  --popover: oklch(0.205 0.0112 260);
  --popover-foreground: oklch(0.985 0.0062 260);
  --primary: oklch(0.62 0.1892 260);
  --primary-foreground: oklch(0.205 0.0192 260);
  --secondary: oklch(0.27 0.0112 260);
  --secondary-foreground: oklch(0.985 0.0062 260);
  --muted: oklch(0.27 0.0112 260);
  --muted-foreground: oklch(0.6411 0.0292 260);
  --accent: oklch(0.31 0.0292 280);
  --accent-foreground: oklch(0.985 0.0063 280);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 260);
  --input: oklch(0.28 0.0112 260);
  --ring: oklch(0.62 0.1892 260);
  --chart-1: oklch(0.7 0.1566 260);
  --chart-2: oklch(0.74 0.1576 300);
  --chart-3: oklch(0.7 0.1692 340);
  --chart-4: oklch(0.74 0.1692 60);
  --chart-5: oklch(0.7 0.1692 140);
  --sidebar: oklch(0.16 0.0072 260);
  --sidebar-foreground: oklch(0.985 0.0062 260);
  --sidebar-primary: oklch(0.62 0.1892 260);
  --sidebar-primary-foreground: oklch(0.205 0.0192 260);
  --sidebar-accent: oklch(0.31 0.0292 280);
  --sidebar-accent-foreground: oklch(0.985 0.0063 280);
  --sidebar-border: oklch(0.28 0.0112 260);
  --sidebar-ring: oklch(0.62 0.1892 260);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@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);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

More shadcn themes

Default
Light
Minimal
Mono
Slate
Neobrutalist

Frequently asked questions

Is the Dark theme free?

Yes — every shadcn theme here is free to use with no signup. Copy the CSS or install via the shadcn CLI.

How do I install it?

Run the shadcn CLI command above, or copy the globals.css and paste its :root and .dark blocks into your project. It's Tailwind v4 + OKLCH; use the generator's Code panel for a Tailwind v3 version.

Does it include a dark mode?

Yes. Every theme ships accessible, contrast-checked light and dark modes — see both in the live preview above.

Can I customize it?

Open this theme in the editor to tweak any color, radius, font or shadow, then export your own version.