Changelog

April 2026

The first public release of Nightfall CSS. Everything you need to reverse-engineer a theme from your existing UI.

Core Features

• Bidirectional theme generation — Light to Dark, Dark to Light, or both in one pass
• Auto-detection — Automatically determines whether your UI is light or dark by sampling background lightness in OKLCH space
• OKLCH color engine — All transformations happen in perceptually uniform OKLCH color space, producing natural-looking results
• Color relationship graph — Builds a tree of which colors sit on which surfaces, preserving hierarchy during transformation
• WCAG contrast enforcement — Checks all foreground/background pairs against AA or AAA standards with automatic correction
• Brand color preservation — Hue never changes, chroma max 15% shift, lightness max 20% shift, delta-E max 15
• Shadow generation — When transforming dark to light, generates a complete shadow scale from scratch

CLI Commands

• scan — Launch Playwright, visit routes, extract computed styles and CSS variables
• generate — Transform scanned colors and export in any format
• preview — Split-screen browser comparison with draggable divider
• audit — WCAG contrast audit with auto-fix option
• graph — Export color relationship graph as SVG
• watch — Re-scan on file changes during development

Output Formats

• CSS custom properties (with OKLCH and optional hex fallbacks)
• Tailwind CSS theme extension
• SCSS variables with color maps
• W3C Design Tokens (JSON) with Nightfall metadata extensions
• Figma Tokens plugin format for design handoff
• Style Dictionary format for cross-platform token pipelines

Presets

• neutral — Cool gray, clean and professional (default)
• warm — Brown/amber undertones, cozy and inviting
• midnight — Deep blue-black, elegant and premium
• oled — True black (#000) for OLED screens, maximum battery saving
• dimmed — Softer, lower contrast for extended reading

Integrations

• React — NightfallProvider, useNightfall hook, NightfallToggle component (under 3KB)
• Vanilla JS — createToggle(), getToggleHTML(), getToggleCSS() for framework-free projects
• FOUC prevention — Under-500-byte inline script to prevent flash of wrong theme
• Programmatic API — transformTheme(), detectThemeDirection(), classifyColors(), and more

Performance

• Incremental scanning with hash-based change detection
• Route-level caching for partial invalidation
• Parallel route scanning (configurable concurrency)
• Watch mode keeps browser warm for sub-200ms rescans