1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability

1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability

1 slot open this month🚨 Slop police🚨 Slop police: we clean up vibe-coded apps.Report itReport your app

Terms of Service Privacy Policy

Registry Health Inspect

Midnight Theme – shadcn/ui Theme by vilqor | shadcnregistry

Registries
vilqor
Midnight Theme

Midnight Theme

theme

The Midnight theme: night-blue surfaces, ink text, a champagne accent, font variables for Fraunces and Geist, and the type, surface and glint styles the blocks use. Dark only.

pnpm dlx shadcn@latest add "https://midnight-lite.vilqor.com/r/midnight-theme.json"

Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore

Light Mode

--paper:

#0b1020

--surface:

#111731

--surface-2:

#182039

--line:

#242c4b

--line-strong:

#343d63

--ink:

#ece9e1

--ink-2:

#a9afc4

--ink-3:

#8f96ad

--positive:

#7cc49b

--brand:

#d9b77e

--brand-ink:

#e3c592

--night-ink:

#ece9e1

--background:

#0b1020

--foreground:

#ece9e1

--card:

#111731

--card-foreground:

#ece9e1

--popover:

#111731

--popover-foreground:

#ece9e1

--primary:

#d9b77e

--primary-foreground:

#0b1020

--secondary:

#182039

--secondary-foreground:

#ece9e1

--muted:

#182039

--muted-foreground:

#a9afc4

--accent:

#182039

--accent-foreground:

#ece9e1

--border:

#242c4b

--input:

#343d63

--ring:

#d9b77e

--radius:

0.75rem

Dark Mode

--paper:

#0b1020

--surface:

#111731

--surface-2:

#182039

--line:

#242c4b

--line-strong:

#343d63

--ink:

#ece9e1

--ink-2:

#a9afc4

--ink-3:

#8f96ad

--positive:

#7cc49b

--brand:

#d9b77e

--brand-ink:

#e3c592

--night-ink:

Theme

--color-paper:

var(--paper)

--color-surface:

var(--surface)

--color-surface-2:

var(--surface-2)

--color-line:

var(--line)

--color-line-strong:

var(--line-strong)

--color-ink:

var(--ink)

--color-ink-2:

var(--ink-2)

--color-ink-3:

var(--ink-3)

--color-positive:

var(--positive)

--color-brand:

var(--brand)

--color-brand-ink:

CSS

#ece9e1

--background:

#0b1020

--foreground:

#ece9e1

--card:

#111731

--card-foreground:

#ece9e1

--popover:

#111731

--popover-foreground:

#ece9e1

--primary:

#d9b77e

--primary-foreground:

#0b1020

--secondary:

#182039

--secondary-foreground:

#ece9e1

--muted:

#182039

--muted-foreground:

#a9afc4

--accent:

#182039

--accent-foreground:

#ece9e1

--border:

#242c4b

--input:

#343d63

--ring:

#d9b77e

--radius:

0.75rem

var(--brand-ink)

--color-brand-on-ink:

var(--brand-on-ink)

--color-brand-soft:

var(--brand-soft)

--color-brand-glint:

var(--brand-glint)

--color-night-ink:

var(--night-ink)

--font-sans:

var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif

--font-serif:

var(--font-fraunces), ui-serif, Georgia, serif

--font-heading:

var(--font-fraunces), ui-serif, Georgia, serif

--font-mono:

var(--font-geist-mono), ui-monospace, monospace

--ease-out-soft:

cubic-bezier(0.2, 0.7, 0.2, 1)