DocsMaking it look right
Themes
terminaltui ships with 12 built-in themes. Set a theme by name or by reference:
// config.ts
import { defineConfig, themes } from "terminaltui";
export default defineConfig({
name: "My Site",
theme: "dracula", // by name
// or
theme: themes.dracula, // by reference
});
Built-in Themes
| Theme | Accent | Best For |
|---|---|---|
cyberpunk | #ff2a6d (hot pink) | Tech startups, gaming, futuristic |
dracula | #ff79c6 (pink) | General purpose, developer tools (default) |
nord | #88c0d0 (frost blue) | Corporate, professional, SaaS |
monokai | #f92672 (magenta) | Developer portfolios, coding tools |
solarized | #268bd2 (blue) | Academic, documentation, research |
gruvbox | #fe8019 (orange) | Restaurants, cafes, warm brands |
catppuccin | #f5c2e7 (pink) | Creative agencies, design portfolios |
tokyoNight | #7aa2f7 (blue) | Modern SaaS, product pages |
rosePine | #ebbcba (rose) | Music, art, personal blogs |
hacker | #00ff41 (green) | Security, infosec, Matrix-style |
If no theme is specified, dracula is used by default.
Custom Themes
Pass a Theme object to use your own colors:
export default defineConfig({
name: "My Site",
theme: {
accent: "#e06c75",
accentDim: "#be5046",
text: "#abb2bf",
muted: "#5c6370",
subtle: "#3e4452",
success: "#98c379",
warning: "#e5c07b",
error: "#e06c75",
border: "#5c6370",
bg: "#282c34",
},
});
Theme Interface
interface Theme {
accent: string; // Primary accent color (hex)
accentDim: string; // Dimmed accent for secondary highlights
text: string; // Primary text color
muted: string; // Muted/secondary text
subtle: string; // Subtle elements (backgrounds, inactive borders)
success: string; // Success state color
warning: string; // Warning state color
error: string; // Error state color
border: string; // Border color
bg?: string; // Background color (optional)
}
All colors are hex strings (e.g., "#ff79c6"). You always write the exact color you mean; the framework maps it down to whatever the viewer’s terminal can actually display.
Color depth
Detected once at startup, in this order:
NO_COLOR(any value) — no color at all. The published standard, and it outranks everything below.TERMINALTUI_COLOR— an explicit override:truecolor/24bit,256,16, ornone. Unrecognized values are ignored rather than obeyed.- Apple Terminal — sniffed from its build number, because Terminal.app is the one major terminal that gained 24-bit color without ever setting
COLORTERM. Build 470+ (macOS 26 Tahoe) gets truecolor; earlier builds get 256, since they parse a38;2triple but snap it to their own palette — strictly worse than quantizing here, where we control the rounding. COLORTERM=truecolor/24bit, then a list of known-truecolor terminals, thenTERM.
The override is worth knowing about for two reasons: it is the escape hatch if that version sniff is ever wrong for your machine, and it is the only way to preview a lower depth on a terminal that reports a higher one.
TERMINALTUI_COLOR=256 terminaltui dev # see what a 256-color viewer sees
TERMINALTUI_COLOR=16 terminaltui dev # and a 16-color one
Themes are designed against truecolor and degrade automatically; see docs/images.md for what the 256-color palette can and cannot express, which matters far more for photographs than for UI chrome.
Border Styles
Borders are separate from themes and apply to cards, tables, and other bordered elements:
export default defineConfig({
name: "My Site",
borders: "rounded", // default
});
Available styles: "single", "double", "rounded", "heavy", "dashed", "ascii", "none".
Individual cards and tables can override the global border style:
card({ title: "Special Card", border: "double" })