Your next
dark theme
reverse-engineered.

npm install nightfall-css

Nightfall scans your live UI, detects light or dark mode, builds a color relationship graph, and generates the opposite theme — in OKLCH color space, with WCAG contrast enforcement and your brand colors preserved.

Not filter: invert(). Not a color swap. Real theme generation.

See it in action

Drag the slider to compare original and generated themes

localhost:3000
Acme Dashboard
Revenue
$48,290
+12.5%
Users
2,841
+8.2%
Orders
1,023
+24.1%
Revenue Over Time
Recent Orders
#3210Sarah K.$249Completed
#3209Mike R.$149Processing
#3208Anna L.$399Completed
Original (Light)
Acme Dashboard
Revenue
$48,290
+12.5%
Users
2,841
+8.2%
Orders
1,023
+24.1%
Revenue Over Time
Recent Orders
#3210Sarah K.$249Completed
#3209Mike R.$149Processing
#3208Anna L.$399Completed
Generated (Dark)

How you use it

1

Scan your app

npx nightfall-css scan --url http://localhost:3000

Nightfall visits your running dev server, auto-detects if you're light-mode or dark-mode, and builds a complete color relationship graph.

2

Generate the opposite theme

npx nightfall-css generate --format css-variables

Transforms every color in OKLCH space — in whichever direction your app needs. Preserves contrast ratios, brand identity, and visual hierarchy.

3

Drop it in

@import './nightfall-generated.css';

A single CSS file. No runtime. No JavaScript. Just CSS variables that activate with [data-theme="dark"] or .dark.

Everything you need

Production-ready theme generation, not a toy color inverter.

Bidirectional

Light→dark or dark→light. Auto-detects your current theme and generates the opposite. Or generate both at once.

OKLCH Color Science

Perceptually uniform color space. Colors look right to human eyes, not just mathematically inverted.

WCAG Auto-Fix

Every color pair is checked for contrast. Failures are auto-corrected with minimal visual shift.

Brand Preservation

Your brand blue stays blue. Configurable tolerance for saturation and lightness shifts.

6 Export Formats

CSS variables, Tailwind, SCSS, JSON tokens, Figma tokens, Style Dictionary.

Visual Preview

Split-screen browser preview with draggable divider. See your generated theme before committing.

Zero Runtime

The output is just CSS. No JavaScript, no framework dependency. ~3KB optional React toggle.

5 Built-in Presets

Neutral, warm, midnight, OLED-black, dimmed. Or bring your own.

Contrast Audit

Full WCAG AA/AAA report for every color pair in your generated theme.

Color science, not guesswork

Every transformation happens in OKLCH color space — perceptually uniform, so your dark theme feels natural.

White
Surface
Text
Brand
Success
Deep dark
Surface
Text
Brand
Success