generate

Transform scanned colors and export them in your preferred format.

Basic Usage

After scanning, run generate to produce the transformed theme:

npx nightfall-css generate --format css-variables

This reads the scan data from .nightfall/scan.json and writes the transformed theme to the default output path.

Format Options

Nightfall supports six output formats:

# CSS custom properties (default)
npx nightfall-css generate --format css-variables

# Tailwind CSS config
npx nightfall-css generate --format tailwind

# SCSS variables
npx nightfall-css generate --format scss

# W3C Design Tokens (JSON)
npx nightfall-css generate --format json-tokens

# Figma Tokens plugin format
npx nightfall-css generate --format figma-tokens

# Style Dictionary format
npx nightfall-css generate --format style-dict

Output Path Configuration

Control where generated files are written:

# Specific output file
npx nightfall-css generate --format css-variables --output ./styles/dark-theme.css

# Output directory (filename is auto-generated)
npx nightfall-css generate --format tailwind --output ./config/

# Default output paths by format:
# css-variables  → ./nightfall-theme.css
# tailwind       → ./nightfall.tailwind.js
# scss           → ./nightfall-theme.scss
# json-tokens    → ./nightfall-tokens.json
# figma-tokens   → ./nightfall-figma-tokens.json
# style-dict     → ./nightfall-style-dict.json

All Options

npx nightfall-css generate [options]

Options:
  --format <format>    Output format (required — see above)
  --output <path>      Output file or directory
  --input <path>       Scan data path (default: .nightfall/scan.json)
  --preset <name>      Apply a preset: neutral | warm | midnight | oled | dimmed
  --direction <dir>    Override direction from scan data
  --contrast <level>   Minimum contrast: aa | aaa (default: aa)
  --selector <sel>     CSS scope selector (default: [data-theme="dark"])
  --prefix <str>       Variable prefix (default: none)
  --dry-run            Preview output without writing files
  --verbose            Show transformation details

Dry Run

Preview what will be generated without writing any files:

npx nightfall-css generate --format css-variables --dry-run

# [generate] Would write 24 tokens to ./nightfall-theme.css
# [generate] Preview:
#   --bg-page: oklch(0.13 0.005 240);
#   --bg-surface: oklch(0.17 0.005 240);
#   --text-heading: oklch(0.95 0.01 240);
#   ...

Variable Prefix

Add a prefix to all generated variable names to avoid collisions:

prefixed output
/* --prefix nf */
  --nf-bg-page:  oklch(0.13 0.005 240);
  --nf-bg-surface:  oklch(0.17 0.005 240);
  --nf-text-heading:  oklch(0.95 0.01 240);

Combining Scan and Generate

For convenience, you can chain scan and generate:

# Two-step workflow
npx nightfall-css scan --url http://localhost:3000
npx nightfall-css generate --format css-variables

# Chain them together
npx nightfall-css scan --url http://localhost:3000 && npx nightfall-css generate --format css-variables