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('--card'),
|
|
foreground: v('--foreground'),
|
|
cursor: v('--foreground'),
|
|
cursorAccent: v('--background'),
|
|
selectionBackground: v('--muted'),
|
|
...ansiColors,
|
|
};
|
|
}
|