diff --git a/src/Interfaces.ts b/src/Interfaces.ts index 9ce8ffd4..da6d2727 100644 --- a/src/Interfaces.ts +++ b/src/Interfaces.ts @@ -307,6 +307,7 @@ export interface ITheme { foreground?: string; background?: string; cursor?: string; + selection?: string; black?: string; red?: string; green?: string; diff --git a/src/renderer/CharAtlas.ts b/src/renderer/CharAtlas.ts index 4fcedd1a..05eb9a84 100644 --- a/src/renderer/CharAtlas.ts +++ b/src/renderer/CharAtlas.ts @@ -67,6 +67,7 @@ function generateConfig(scaledCharWidth: number, scaledCharHeight: number, termi foreground: colors.foreground, background: null, cursor: null, + selection: null, ansi: colors.ansi.slice(0, 16) }; return { diff --git a/src/renderer/ColorManager.ts b/src/renderer/ColorManager.ts index 581f09a9..17aee392 100644 --- a/src/renderer/ColorManager.ts +++ b/src/renderer/ColorManager.ts @@ -4,6 +4,7 @@ import { ITheme } from '../Interfaces'; const DEFAULT_FOREGROUND = '#ffffff'; const DEFAULT_BACKGROUND = '#000000'; const DEFAULT_CURSOR = '#ffffff'; +const DEFAULT_SELECTION = 'rgba(255, 255, 255, 0.9)'; export const DEFAULT_ANSI_COLORS = [ // dark: '#2e3436', @@ -59,6 +60,7 @@ export class ColorManager { foreground: DEFAULT_FOREGROUND, background: DEFAULT_BACKGROUND, cursor: DEFAULT_CURSOR, + selection: DEFAULT_SELECTION, ansi: generate256Colors(DEFAULT_ANSI_COLORS) }; } @@ -72,6 +74,7 @@ export class ColorManager { this.colors.foreground = theme.foreground || DEFAULT_FOREGROUND; this.colors.background = theme.background || DEFAULT_BACKGROUND; this.colors.cursor = theme.cursor || DEFAULT_CURSOR; + this.colors.selection = theme.selection || DEFAULT_SELECTION; this.colors.ansi[0] = theme.black || DEFAULT_ANSI_COLORS[0]; this.colors.ansi[1] = theme.red || DEFAULT_ANSI_COLORS[1]; this.colors.ansi[2] = theme.green || DEFAULT_ANSI_COLORS[2]; diff --git a/src/renderer/Interfaces.ts b/src/renderer/Interfaces.ts index f7645abf..04e24e19 100644 --- a/src/renderer/Interfaces.ts +++ b/src/renderer/Interfaces.ts @@ -66,5 +66,6 @@ export interface IColorSet { foreground: string; background: string; cursor: string; + selection: string; ansi: string[]; } diff --git a/src/renderer/SelectionRenderLayer.ts b/src/renderer/SelectionRenderLayer.ts index 7f131da8..91e62a0c 100644 --- a/src/renderer/SelectionRenderLayer.ts +++ b/src/renderer/SelectionRenderLayer.ts @@ -63,7 +63,7 @@ export class SelectionRenderLayer extends BaseRenderLayer { // Draw first row const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0; const startRowEndCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : terminal.cols; - this._ctx.fillStyle = 'rgba(255,255,255,0.3)'; + this._ctx.fillStyle = this.colors.selection; this.fillCells(startCol, viewportCappedStartRow, startRowEndCol - startCol, 1); // Draw middle rows diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 866021e8..eff26c9b 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -83,6 +83,8 @@ interface ITheme { background?: string, /** The cursor color */ cursor?: string, + /** The selection color (can be transparent) */ + selection?: string, /** ANSI black (eg. `\x1b[30m`) */ black?: string, /** ANSI red (eg. `\x1b[31m`) */