Foundations

Theming

Neoncite is intentionally dark-only. Components read semantic CSS variables, so you can change accents, OLED surfaces, text, radius, glow, and other dark-theme tokens without forking component behavior.

Official dark presets

Neoncite

$terminal

npx neoncite add theme-neoncite

Ocean

$terminal

npx neoncite add theme-ocean

Ember

$terminal

npx neoncite add theme-ember

Forest

$terminal

npx neoncite add theme-forest

Ultraviolet

$terminal

npx neoncite add theme-ultraviolet

Neon palette

Override semantic tokens

<>globals.css

:root, .dark {
  --surface-0: #000000;
  --surface-1: #09090b;
  --surface-2: #121214;
  --surface-3: #1c1c1e;
  --background: var(--surface-0);
  --foreground: #f2f2f7;
  --primary: #ff2a9d;
  --accent: #00f0ff;
  --ring: var(--primary);
}

Theme Builder workflow

Use the Theme Builder to preview production Neoncite components while editing the same tokens shipped to users.

It supports named local themes, validated JSON import/export, CSS export, DTCG-compatible token JSON, contrast checks, and shareable URL state.

Imported surface colors are validated as dark surfaces; the Theme Builder does not create a light-mode variant.

Open Theme Builder