Theming

Theme configuration, CSS variables, CRT effects, and sounds.

Theme Config

Pass a TerminalThemeConfig to integrate with your app's theme system. This enables the built-in theme and mode commands.

theme-config.tsx
interface TerminalThemeConfig {
  current: string                                    // Active theme ID
  mode: "dark" | "light"                             // Color mode
  themes?: Array<{ id: string; name: string }>       // Available themes
  onThemeChange?: (themeId: string) => void           // Theme changed
  onModeChange?: (mode: "dark" | "light") => void    // Mode changed
}

<Terminal
  theme={{
    current: "nord",
    mode: "dark",
    themes: [
      { id: "nord", name: "Nord" },
      { id: "gruvbox", name: "Gruvbox" },
    ],
    onThemeChange: (id) => setTheme(id),
    onModeChange: (mode) => setMode(mode),
  }}
/>

CSS Variables

All terminal styling uses CSS custom properties. Override them in your stylesheet to match your design system.

theme.css
:root {
  /* Core */
  --terminal-bg: #1e1e2e;
  --terminal-bg-secondary: #313244;
  --terminal-text: #cdd6f4;
  --terminal-text-muted: #6c7086;
  --terminal-accent: #89b4fa;
  --terminal-border: #45475a;

  /* Typography */
  --terminal-font: "SF Mono", "Fira Code", monospace;
  --terminal-font-size: 14px;
  --terminal-line-height: 1.5;

  /* Spacing & Chrome */
  --terminal-padding: 16px;
  --terminal-radius: 8px;
  --terminal-titlebar-height: 44px;
  --terminal-statusbar-height: 28px;

  /* Prompt */
  --terminal-prompt-cwd: var(--terminal-color-chart-5);
  --terminal-prompt-symbol: var(--terminal-color-main);
  --terminal-cursor: var(--terminal-color-main);

  /* Effects */
  --terminal-backdrop-blur: 12px;
  --terminal-bg-opacity: 0.95;
  --terminal-transition-duration: 200ms;
  --terminal-line-stagger: 20ms;
}

Color Map

The colorMap prop overrides the mapping from semantic color tokens to CSS values. This is useful when your app's CSS variables don't match the terminal's defaults.

color-map.tsx
<Terminal
  colorMap={{
    main: "var(--my-green)",
    accent: "var(--my-blue)",
    destructive: "var(--my-red)",
    "chart-1": "#fab387",
    "chart-2": "#a6e3a1",
  }}
/>

Available tokens: foreground, muted, main, accent, chart-1 through chart-5, destructive.

CRT Mode

Enable CRT effects (scanlines, phosphor glow, vignette) with the crt prop. Requires importing the CRT stylesheet.

crt.tsx
import "@trents/terminal/crt.css"

<Terminal crt={true} />

Customize CRT intensity with CSS variables:

crt-custom.css
.terminal--crt {
  --crt-scanline-opacity: 0.08;
  --crt-glow-color: var(--terminal-color-main);
  --crt-glow-intensity: 0.6;
  --crt-vignette-intensity: 0.3;
}

Sounds

Enable procedural typing sounds with the sounds prop. Pass true for all sounds, or a config object for granular control.

sounds.tsx
// All sounds enabled
<Terminal sounds={true} />

// Granular control
<Terminal
  sounds={{
    keyClick: true,
    error: true,
    clear: false,
    boot: true,
  }}
/>
0