Interactive Demo

Drag the slider to compare original and generated themes side by side. Toggle between Light-to-Dark and Dark-to-Light directions to see how Nightfall transforms colors in both directions.

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)

What You Are Seeing

This demo shows a mock dashboard UI being transformed by Nightfall. The left side is the original theme and the right side is the generated opposite theme. Notice how:

  • Backgrounds invert properly — White does not become pure black. Instead it maps to a deep dark gray that feels natural.
  • Text hierarchy is preserved — Headings remain the highest contrast, body text is slightly lower, and muted text stays subtle.
  • Brand colors stay recognizable — The blue accent color shifts slightly for contrast but remains identifiably the same blue.
  • Chart elements adapt — Data visualization colors adjust to maintain readability on the new background.
  • Status colors work in both modes — Green for success, the accent for processing — both adapt to their background.

Try It on Your Site

To see this transformation applied to your own UI, run:

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

The preview command opens an interactive split-screen view of your actual site with the generated theme applied — just like this demo, but with your real UI.