Add selection to ITheme

src/Interfaces.ts

@@ -307,6 +307,7 @@ export interface ITheme {
   foreground?: string;
   background?: string;
   cursor?: string;
+  selection?: string;
   black?: string;
   red?: string;
   green?: string;

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 {

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];

src/renderer/Interfaces.ts

@@ -66,5 +66,6 @@ export interface IColorSet {
   foreground: string;
   background: string;
   cursor: string;
+  selection: string;
   ansi: string[];
 }

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

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`) */