Both Themes

Generate both light and dark themes in a single pass with --direction both.

Overview

The --direction both flag tells Nightfall to generate both the light and dark variants of your theme in one output file. This is useful when you want to ship a complete theme system from a single source of truth.

npx nightfall-css scan --url http://localhost:3000 --direction both
npx nightfall-css generate --format css-variables --output themes.css

Output Structure

The generated file contains both themes scoped under appropriate selectors:

themes.css
/* Auto-generated by Nightfall CSS */

:root, [data-theme="light"] {
  --bg-page:  oklch(0.98 0.003 240);
  --bg-surface:  oklch(1.00 0.000 0);
  --text-heading:  oklch(0.15 0.01 240);
  --text-body:  oklch(0.30 0.01 240);
  --border-default:  rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.05);
  /* ... */
}

[data-theme="dark"] {
  --bg-page:  oklch(0.13 0.005 240);
  --bg-surface:  oklch(0.17 0.005 240);
  --text-heading:  oklch(0.95 0.01 240);
  --text-body:  oklch(0.82 0.01 240);
  --border-default:  rgba(255, 255, 255, 0.08);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.40);
  /* ... */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg-page:  oklch(0.13 0.005 240);
  --bg-surface:  oklch(0.17 0.005 240);
    /* ... same as [data-theme="dark"] */
  }
}

Roundtrip Stability

Nightfall includes a roundtrip stability test: transforming light to dark and then back to light should produce colors within a delta-E of 2.0 from the originals. This proves that no information is lost during transformation.

# Roundtrip test
npx nightfall-css scan --url http://localhost:3000 --direction both --verbose

# Output:
# [roundtrip] Testing light → dark → light stability
# [roundtrip] --bg-page:      ΔE = 0.8  ✓
# [roundtrip] --bg-surface:   ΔE = 1.1  ✓
# [roundtrip] --text-heading: ΔE = 0.4  ✓
# [roundtrip] --text-body:    ΔE = 0.6  ✓
# [roundtrip] --brand-primary: ΔE = 1.9 ✓
# [roundtrip] All 24 tokens within ΔE < 2.0 tolerance

When to Use Both

  • Design systems — Ship both themes as part of your token package.
  • Component libraries — Ensure every component works in both modes.
  • Validation — The roundtrip test catches any transformation that degrades quality.
  • System preference support — The generated prefers-color-scheme media query respects OS settings automatically.

Combining with Presets

You can combine --direction both with a preset to generate themed variants:

# Generate both themes using the midnight preset
npx nightfall-css generate --direction both --preset midnight --output midnight-themes.css