Make the terminal background theme aware

demo/style.css

@@ -16,7 +16,5 @@ h1 {
 }
 
 #terminal-container .terminal {
-    background-color: #111;
-    color: #fafafa;
     padding: 2px;
 }

src/Interfaces.ts

@@ -4,6 +4,7 @@
 
 import { ILinkMatcherOptions } from './Interfaces';
 import { LinkMatcherHandler, LinkMatcherValidationCallback, Charset, LineData } from './Types';
+import { IColorSet } from './renderer/Interfaces';
 
 export interface IBrowser {
   isNode: boolean;
@@ -163,6 +164,7 @@ export interface IViewport {
   onWheel(ev: WheelEvent): void;
   onTouchStart(ev: TouchEvent): void;
   onTouchMove(ev: TouchEvent): void;
+  onThemeChanged(colors: IColorSet): void;
 }
 
 export interface ISelectionManager {

src/Terminal.ts

@@ -318,7 +318,10 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
   public setTheme(theme: ITheme): void {
     // TODO: Allow setting of theme before renderer is ready
     if (this.renderer) {
-      this.renderer.setTheme(theme);
+      const colors = this.renderer.setTheme(theme);
+      if (this.viewport) {
+        this.viewport.onThemeChanged(colors);
+      }
     }
   }
 

src/Viewport.ts

@@ -4,6 +4,7 @@
 
 import { ITerminal, IViewport } from './Interfaces';
 import { CharMeasure } from './utils/CharMeasure';
+import { IColorSet } from './renderer/Interfaces';
 
 /**
  * Represents the viewport of a terminal, the visible area within the larger buffer of output.
@@ -40,6 +41,10 @@ export class Viewport implements IViewport {
     setTimeout(() => this.syncScrollArea(), 0);
   }
 
+  public onThemeChanged(colors: IColorSet): void {
+    this.viewportElement.style.backgroundColor = colors.background;
+  }
+
   /**
    * Refreshes row height, setting line-height, viewport height and scroll area height if
    * necessary.

src/renderer/Renderer.ts

@@ -11,7 +11,7 @@ import { SelectionRenderLayer } from './SelectionRenderLayer';
 import { CursorRenderLayer } from './CursorRenderLayer';
 import { ColorManager } from './ColorManager';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { IRenderLayer } from './Interfaces';
+import { IRenderLayer, IColorSet } from './Interfaces';
 
 export class Renderer {
   /** A queue of the rows to be refreshed */
@@ -32,7 +32,7 @@ export class Renderer {
     ];
   }
 
-  public setTheme(theme: ITheme): void {
+  public setTheme(theme: ITheme): IColorSet {
     this._colorManager.setTheme(theme);
     // Clear layers and force a full render
     this._renderLayers.forEach(l => {
@@ -42,6 +42,8 @@ export class Renderer {
 
     // TODO: This is currently done for every single terminal, but it's static so it's wasting time
     this._terminal.refresh(0, this._terminal.rows - 1);
+
+    return this._colorManager.colors;
   }
 
   public onResize(cols: number, rows: number): void {

src/utils/TestUtils.test.ts

@@ -202,6 +202,9 @@ export class MockBuffer implements IBuffer {
 }
 
 export class MockViewport implements IViewport {
+  onThemeChanged(colors: IColorSet): void {
+    throw new Error('Method not implemented.');
+  }
   onWheel(ev: WheelEvent): void {
     throw new Error('Method not implemented.');
   }

src/xterm.css

@@ -36,9 +36,6 @@
  */
 
 .terminal {
-    /** TODO: Remove colors from xterm.css */
-    background-color: #000;
-    color: #fff;
     font-family: courier-new, courier, monospace;
     font-feature-settings: "liga" 0;
     position: relative;
@@ -76,6 +73,7 @@
 }
 
 .terminal .composition-view {
+    /* TODO: Composition position got messed up somewhere */
     background: #000;
     color: #FFF;
     display: none;