Themes

wterm uses CSS custom properties for all visual styling, making it easy to switch between built-in themes or create your own.

Using a Theme

React

Pass the theme name via the theme prop:

<Terminal theme="monokai" wasmUrl="/wterm.wasm" />

Vanilla JS

Add the theme class to the terminal element:

const term = new WTerm(document.getElementById("terminal"), {
  wasmUrl: "/wterm.wasm",
});
term.element.classList.add("theme-monokai");
await term.init();

Built-in Themes

Default

The default dark theme, inspired by VS Code's Dark+ palette.

Property	Value
Background	`#1e1e1e`
Foreground	`#d4d4d4`
Cursor	`#aeafad`

Solarized Dark

The classic Solarized Dark color scheme by Ethan Schoonover.

<Terminal theme="solarized-dark" wasmUrl="/wterm.wasm" />

Property	Value
Background	`#002b36`
Foreground	`#839496`
Cursor	`#93a1a1`

Monokai

Based on the Monokai color scheme.

<Terminal theme="monokai" wasmUrl="/wterm.wasm" />

Property	Value
Background	`#272822`
Foreground	`#f8f8f2`
Cursor	`#f8f8f0`

Light

A clean light theme inspired by Atom's One Light.

<Terminal theme="light" wasmUrl="/wterm.wasm" />

Property	Value
Background	`#fafafa`
Foreground	`#383a42`
Cursor	`#526eff`

Custom Themes

Create a custom theme by defining a CSS class that overrides the wterm custom properties:

.wterm.theme-tokyo-night {
  --term-bg: #1a1b26;
  --term-fg: #c0caf5;
  --term-cursor: #f7768e;

  --term-color-0: #15161e;
  --term-color-1: #f7768e;
  --term-color-2: #9ece6a;
  --term-color-3: #e0af68;
  --term-color-4: #7aa2f7;
  --term-color-5: #bb9af7;
  --term-color-6: #7dcfff;
  --term-color-7: #a9b1d6;
  --term-color-8: #414868;
  --term-color-9: #f7768e;
  --term-color-10: #9ece6a;
  --term-color-11: #e0af68;
  --term-color-12: #7aa2f7;
  --term-color-13: #bb9af7;
  --term-color-14: #7dcfff;
  --term-color-15: #c0caf5;
}

Then apply it the same way as a built-in theme:

<Terminal theme="tokyo-night" wasmUrl="/wterm.wasm" />

CSS Custom Properties Reference

Property	Description
`--term-bg`	Terminal background color
`--term-fg`	Default text color
`--term-cursor`	Cursor color
`--term-font-family`	Font stack (default: Menlo, Consolas, DejaVu Sans Mono, Courier New, monospace)
`--term-font-size`	Font size (default: `14px`)
`--term-line-height`	Line height multiplier (default: `1.2`)
`--term-color-0` … `--term-color-7`	Standard ANSI colors (black, red, green, yellow, blue, magenta, cyan, white)
`--term-color-8` … `--term-color-15`	Bright ANSI colors

Colors beyond the 16-color palette (indices 16–255 and true-color RGB) are computed by the renderer and do not use custom properties.