Presets

Five built-in presets for different dark theme aesthetics. Each adjusts the base darkness, undertone, and contrast curve.

Available Presets

neutral

Cool gray. The default preset — clean, professional, and universally appropriate. Uses a blue-gray undertone that works for SaaS, documentation, and enterprise apps.

warm

Brown and amber undertones create a cozy, inviting feel. Works well for editorial content, portfolios, and lifestyle brands.

midnight

Deep blue-black. Elegant and premium. Great for creative tools, developer products, and apps that want a sophisticated nighttime feel.

oled

True black (#000000) backgrounds for OLED screens. Maximum contrast for readability. Saves battery on mobile devices with OLED displays.

dimmed

Softer, lower contrast for extended reading sessions. Reduces eye strain by using lighter dark backgrounds and slightly muted foreground colors.

Using a Preset

# Apply during generation
npx nightfall-css generate --format css-variables --preset midnight

# Apply during preview
npx nightfall-css preview --preset warm

# Override with --direction both
npx nightfall-css generate --direction both --preset oled

What Presets Control

Each preset adjusts these parameters:

  • Base lightness — How dark the page background is (L=0.05 for oled, L=0.13 for neutral, L=0.18 for dimmed)
  • Hue undertone — The hue angle for neutral surfaces (240 for neutral, 30 for warm, 250 for midnight)
  • Chroma amount — How much color tint the neutrals have (0 for oled, 0.005 for neutral, 0.015 for midnight)
  • Elevation step — Lightness increment per surface level (0.04 for neutral, 0.035 for dimmed)
  • Text contrast curve — How much contrast text has against backgrounds

Preset Comparison

page backgrounds by preset
/* neutral */  --bg-page: oklch(0.13 0.005 240);  /* Cool gray */
/* warm */     --bg-page: oklch(0.12 0.010 30);   /* Warm brown */
/* midnight */ --bg-page: oklch(0.10 0.015 250);  /* Deep blue */
/* oled */     --bg-page: oklch(0.00 0.000 0);    /* True black */
/* dimmed */   --bg-page: oklch(0.18 0.003 240);  /* Soft gray */

Custom Presets

You can create custom presets by providing a configuration file:

nightfall.config.js
module.exports = {
  presets: {
    custom: {
      baseLightness: 0.10,
      hueUndertone: 280,    // Purple undertone
      chromaAmount: 0.02,
      elevationStep: 0.05,
      textContrast: 'high',
    }
  }
};
npx nightfall-css generate --preset custom