Theming

Overview

termprompt ships with five semantic colors: accent, success, error, warning, and info. All customizable via setTheme.

import { setTheme } from 'termprompt';

setTheme({
  accent: '#7c3aed',    // interactive states (default: cyan)
  success: '#22c55e',   // submitted/completed (default: green)
  error: '#ef4444',     // failures (default: red)
  warning: '#f59e0b',   // cancel/validation (default: yellow)
  info: '#3b82f6',      // informational (default: blue)
});

All properties are optional. One call at startup. Every prompt, spinner, and log uses your colors from that point on.

Supported Formats

Hex

setTheme({ accent: '#ff6600' });   // #rrggbb
setTheme({ accent: '#f60' });      // #rgb (short form)
setTheme({ accent: '#ff660080' }); // #rrggbbaa (alpha ignored)

RGB / RGBA

setTheme({ accent: 'rgb(255, 100, 0)' });
setTheme({ accent: 'rgba(255, 100, 0, 0.8)' }); // alpha ignored

Named Colors

setTheme({ accent: 'red' });
setTheme({ accent: 'green' });
setTheme({ accent: 'yellow' });
setTheme({ accent: 'blue' });
setTheme({ accent: 'magenta' });
setTheme({ accent: 'cyan' });     // default
setTheme({ accent: 'gray' });

Named colors use standard ANSI codes, which means they respect the user's terminal color scheme.

Custom Function

Any function with the signature (text: string) => string works.

// Raw ANSI
setTheme({
  accent: (text) => `\x1b[38;2;255;100;0m${text}\x1b[39m`,
});

// chalk
import chalk from 'chalk';
setTheme({ accent: chalk.hex('#ff6600') });

// picocolors
import pc from 'picocolors';
setTheme({ accent: pc.magenta });

// kleur
import kleur from 'kleur';
setTheme({ accent: kleur.magenta });

What Gets Themed

Color	Default	Where it appears
accent	cyan	Active prompt icon ◇, focus pointer >, confirm highlight, spinner animation, progress bar fill
success	green	Submitted icon ◆, selected radio ◉, checked checkbox ■, spinner/progress/task completion, log.success, note title and border
warning	yellow	Cancel icon, validation error icon and message, log.warn
error	red	Spinner/progress/task failure icon, failed task title, log.error
info	blue	log.info icon

Types

import type { ColorFn, ColorValue, Theme, ThemeConfig } from 'termprompt';

type ColorFn = (text: string) => string;

type ColorValue =
  | ColorFn
  | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'gray'
  | (string & {}); // hex, rgb(), rgba()

type Theme = {
  accent: ColorFn;
  success: ColorFn;
  error: ColorFn;
  warning: ColorFn;
  info: ColorFn;
};

type ThemeConfig = {
  accent?: ColorValue;
  success?: ColorValue;
  error?: ColorValue;
  warning?: ColorValue;
  info?: ColorValue;
};

Colors Utility

termprompt also exports a colors object if you need the built-in ANSI color functions for other purposes.

import { colors } from 'termprompt';

console.log(colors.red('Error!'));
console.log(colors.green('Success'));
console.log(colors.cyan('Info'));

Available: red, green, yellow, blue, magenta, cyan, gray.