❯_termy
DeveloperWeb terminal

Web terminal themes

Use bundled Termy themes, xterm.js themes, or override individual colors.

The theme option accepts three forms.

// A bundled Termy theme
new Terminal({ theme: 'catppuccin-mocha' })

// A full theme object (the same shape as xterm.js ITheme)
new Terminal({ theme: { background: '#0b0b0f', foreground: '#e6e6e6', cursor: '#7aa2f7' } })

// A bundled theme with overrides
new Terminal({ theme: { extends: 'nord', cursor: '#ebcb8b', selectionBackground: '#88c0d055' } })

Change it at any time with term.setOptions({ theme: 'dracula' }).

Bundled themes

builtinThemeIds() lists the themes compiled into the engine. They are a small subset of the desktop app's built-in themes, under the same ids:

termy, termy-light, tokyo-night, catppuccin-mocha, dracula, gruvbox-dark, nord, solarized-dark, one-dark, monokai, material-dark, palenight, tomorrow-night, oceanic-next.

import { builtinTheme, builtinThemeIds } from '@termysh/web'

await term.ready
builtinThemeIds()              // ['termy', 'termy-light', ...]
builtinTheme('tokyo-night')    // { foreground, background, cursor, ansi: [16 colors] }

Ids ignore case and separators, so 'Tokyo Night' and tokyo_night work too.

Theme keys

Colors accept any CSS color: #rgb, #rrggbb, #rrggbbaa, rgb(), rgba() or a named color.

KeyUsed for
foreground, backgroundDefault text and background
cursor, cursorAccentCursor color and the text under a block cursor
selectionBackgroundSelection while focused; alpha blends with the cell
selectionInactiveBackgroundSelection while unfocused
selectionForegroundSelected text (defaults to the cell's own color)
black ... whiteANSI colors 0-7
brightBlack ... brightWhiteANSI colors 8-15
extendedAnsiPalette entries 16-255; missing entries use the standard 256-color cube
scrollbarThumbOverlay scrollbar

Colors set by applications

Programs can still change colors at runtime with OSC 4 (palette), OSC 10 (foreground), OSC 11 (background) and OSC 12 (cursor). When a program queries colors, the terminal answers with the active theme, so tools that detect light or dark backgrounds pick the right colors.

On this page