Carlos Florêncio
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type { ITheme } from "@xterm/xterm";
|
|
|
|
/**
|
|
* ANSI terminal colors — standard palette, not derived from the app theme.
|
|
* These are used for syntax highlighting, command output, etc.
|
|
*/
|
|
const ansiColors = {
|
|
black: "#1e1e1e",
|
|
red: "#f44747",
|
|
green: "#6a9955",
|
|
yellow: "#dcdcaa",
|
|
blue: "#569cd6",
|
|
magenta: "#c586c0",
|
|
cyan: "#4ec9b0",
|
|
white: "#d4d4d4",
|
|
brightBlack: "#808080",
|
|
brightRed: "#f44747",
|
|
brightGreen: "#6a9955",
|
|
brightYellow: "#dcdcaa",
|
|
brightBlue: "#569cd6",
|
|
brightMagenta: "#c586c0",
|
|
brightCyan: "#4ec9b0",
|
|
brightWhite: "#ffffff",
|
|
} as const;
|
|
|
|
/**
|
|
* Build the xterm.js theme by resolving CSS custom properties from the DOM.
|
|
*
|
|
* xterm's WebGL addon renders onto a <canvas> so it can't use CSS variables
|
|
* directly — we read computed values at terminal creation time instead.
|
|
*
|
|
* All theme-dependent colors come from CSS variables defined in globals.css,
|
|
* so changing the app theme in one place updates terminals too.
|
|
*/
|
|
export function getTerminalTheme(container: HTMLElement): ITheme {
|
|
const s = getComputedStyle(container);
|
|
const v = (name: string) => s.getPropertyValue(name).trim();
|
|
|
|
return {
|
|
background: v("--background"),
|
|
foreground: v("--foreground"),
|
|
cursor: v("--foreground"),
|
|
cursorAccent: v("--background"),
|
|
selectionBackground: v("--muted"),
|
|
...ansiColors,
|
|
};
|
|
}
|