CSS Variables

Export your generated theme as CSS custom properties scoped to a selector.

Generate

npx nightfall-css generate --format css-variables --output nightfall-theme.css

Output Example

nightfall-theme.css
/* Generated by Nightfall CSS v0.1.0 */
/* Direction: light → dark | Preset: neutral */

:root[data-theme="dark"],
.dark {
  /* Backgrounds */
  --color-bg-page:  oklch(0.13 0.005 240);
  --color-bg-surface:  oklch(0.17 0.005 240);
  --color-bg-elevated:  oklch(0.21 0.005 240);
  --color-bg-overlay:  oklch(0.25 0.005 240);

  /* Text */
  --color-text-heading:  oklch(0.95 0.01 240);
  --color-text-body:  oklch(0.82 0.01 240);
  --color-text-muted:  oklch(0.60 0.01 240);

  /* Borders */
  --color-border-default:  rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.14);
  --color-border-subtle:  rgba(255, 255, 255, 0.04);

  /* Brand */
  --color-brand-primary:  oklch(0.62 0.20 260);
  --color-brand-text:  oklch(0.98 0.005 260);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 10px 20px rgba(0, 0, 0, 0.50);
}

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

Using the Variables

Import the generated file and use the variables in your styles:

styles.css
@import './nightfall-theme.css';

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-body);
  box-shadow: var(--shadow-md);
}

.card h2 {
  color: var(--color-text-heading);
}

.card .meta {
  color: var(--color-text-muted);
}

.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-brand-text);
}

Custom Selector

Change the scoping selector with --selector:

# Scope to a class instead of data attribute
npx nightfall-css generate --format css-variables --selector ".dark-theme"

# Scope to :root for global application
npx nightfall-css generate --format css-variables --selector ":root"

OKLCH vs Hex

Nightfall outputs OKLCH values by default because they are more precise and enable CSS-native color manipulation. If you need hex fallbacks for older browsers, Nightfall includes both:

/* With fallbacks enabled */
  --color-bg-page:  #0f1012;
  --color-bg-page:  oklch(0.13 0.005 240);
# Enable hex fallbacks
npx nightfall-css generate --format css-variables --fallback hex

Browser Support

OKLCH is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). For older browsers, use the --fallback hex option to include hex values as progressive enhancement.