Theming
NeoTerm UI uses CSS custom properties for all colors, making it fully customizable.
Color tokens
Override any variable on :root or .dark to customize the palette.
| Variable | Default | Description |
|---|---|---|
| --neon | #39ff14 | Primary neon green |
| --cyan | #00d4ff | Cyan accent |
| --magenta | #ff2d95 | Magenta accent |
| --amber | #ffa629 | Amber accent |
| --destructive | #ff3535 | Error / destructive red |
| --background | #07070d | Page background (dark) |
| --foreground | #f7f8fb | Primary text (dark) |
| --card | #0d0d15 | Card / surface (dark) |
| --border | #1c1c2e | Borders (dark) |
| --muted-foreground | #a8adc8 | Secondary text (dark) |
Customization
:root {
--neon: #00ffcc; /* swap green for teal */
--radius: 6px; /* rounder corners */
--font-mono: "Fira Code", monospace;
}Utility classes
| Class | Effect |
|---|---|
| .cursor-blink | Blinking text cursor |
| .pulse-neon | Pulsing opacity effect (2s) |
| .shimmer | Skeleton loading shimmer |
| .neo-spin | 360° rotation (1s) |
| .glass | Glass-morphism blur + border |
| .scanlines | CRT scanline overlay via ::after |
| .dot-grid | Radial dot pattern background |
| .glow-green/.glow-cyan/… | Neon text-shadow glow |
Dark / Light mode
Add className="dark" to <html> for dark mode. NeoTerm ships both palettes; light mode uses inverted terminal colors (light background, dark text).