preview

Visually compare your original theme with the generated one in a split-screen browser.

Basic Usage

npx nightfall-css preview

Opens a local browser window with a split-screen comparison. The left side shows your original UI, and the right side shows the generated theme applied in real time. A draggable divider lets you slide between the two.

Split-Screen Interface

The preview window includes:

  • Draggable divider — Click and drag to compare any region of your UI side by side.
  • Preset selector — Switch between presets (neutral, warm, midnight, oled, dimmed) and see the result instantly.
  • Contrast toggle — Toggle WCAG contrast overlays to see which elements pass AA/AAA.
  • Color overrides — Click any color swatch to manually tweak it and see the change live.
  • Export button — When satisfied, click Export to write the theme file.

Options

npx nightfall-css preview [options]

Options:
  --url <url>          Target URL (uses scan data URL by default)
  --port <port>        Local preview server port (default: 4400)
  --preset <name>      Start with a specific preset
  --format <format>    Export format when using the Export button
  --output <path>      Export output path
  --route <path>       Start on a specific route

Preset Selector

The preset dropdown in the toolbar lets you cycle through all available presets. Each preset applies immediately so you can compare them visually:

# Start preview with the midnight preset selected
npx nightfall-css preview --preset midnight

Contrast Overlay

Toggle the contrast overlay to see a color-coded map of WCAG compliance across your UI:

  • Green outline — Passes WCAG AAA (7:1 or better)
  • Yellow outline — Passes WCAG AA (4.5:1) but not AAA
  • Red outline — Fails WCAG AA (below 4.5:1)

Color Overrides

Click any color in the generated theme panel to open an inline editor. Adjustments are constrained to maintain WCAG compliance:

# In the preview window:
# 1. Click a color swatch in the right panel
# 2. Adjust hue, chroma, or lightness with sliders
# 3. The preview updates in real time
# 4. Contrast ratios are recalculated live
# 5. A warning appears if your change would break WCAG AA

Exporting from Preview

Once satisfied, click the Export button in the top-right corner. This writes the theme file with any manual overrides baked in:

# The Export button runs the equivalent of:
npx nightfall-css generate --format css-variables --output dark-theme.css
# With any manual color overrides included in the output

Keyboard Shortcuts

  • 1-5 — Switch between presets
  • C — Toggle contrast overlay
  • R — Reset all overrides
  • E — Export current theme
  • Left/Right arrows — Move the divider