Create theme service

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -10,8 +10,8 @@ import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
-import { ICoreBrowserService } from 'browser/services/Services';
-import { IColorSet } from 'browser/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
@@ -46,20 +46,24 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     id: string,
     zIndex: number,
     private _alpha: boolean,
-    protected _colors: IColorSet,
+    protected readonly _themeService: IThemeService,
     protected readonly _bufferService: IBufferService,
     protected readonly _optionsService: IOptionsService,
     protected readonly _decorationService: IDecorationService,
     protected readonly _coreBrowserService: ICoreBrowserService
   ) {
     super();
-    this._cellColorResolver = new CellColorResolver(this._terminal, this._colors, this._selectionModel, this._decorationService, this._coreBrowserService);
+    this._cellColorResolver = new CellColorResolver(this._terminal, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService);
     this._canvas = document.createElement('canvas');
     this._canvas.classList.add(`xterm-${id}-layer`);
     this._canvas.style.zIndex = zIndex.toString();
     this._initCanvas();
     this._container.appendChild(this._canvas);
-    this._refreshCharAtlas(this._colors);
+    this._refreshCharAtlas(this._themeService.colors);
+    this.register(this._themeService.onChangeColors(e => {
+      this._refreshCharAtlas(e);
+      this.reset();
+    }));
 
     this.register(toDisposable(() => {
       removeElementFromParent(this._canvas);
@@ -85,10 +89,6 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     this._selectionModel.update(this._terminal, start, end, columnSelectMode);
   }
 
-  public setColors(colorSet: IColorSet): void {
-    this._refreshCharAtlas(colorSet);
-  }
-
   protected _setTransparency(alpha: boolean): void {
     // Do nothing when alpha doesn't change
     if (alpha === this._alpha) {
@@ -104,15 +104,15 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     this._container.replaceChild(this._canvas, oldCanvas);
 
     // Regenerate char atlas and force a full redraw
-    this._refreshCharAtlas(this._colors);
+    this._refreshCharAtlas(this._themeService.colors);
     this.handleGridChanged(0, this._bufferService.rows - 1);
   }
 
   /**
    * Refreshes the char atlas, aquiring a new one if necessary.
    * @param colorSet The color set to use for the char atlas.
    */
-  private _refreshCharAtlas(colorSet: IColorSet): void {
+  private _refreshCharAtlas(colorSet: ReadonlyColorSet): void {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
@@ -138,7 +138,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
       this._clearAll();
     }
 
-    this._refreshCharAtlas(this._colors);
+    this._refreshCharAtlas(this._themeService.colors);
   }
 
   public abstract reset(): void;
@@ -294,7 +294,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     if (this._alpha) {
       this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
     } else {
-      this._ctx.fillStyle = this._colors.background.css;
+      this._ctx.fillStyle = this._themeService.colors.background.css;
       this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
     }
   }
@@ -314,7 +314,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
         width * this._scaledCellWidth,
         height * this._scaledCellHeight);
     } else {
-      this._ctx.fillStyle = this._colors.background.css;
+      this._ctx.fillStyle = this._themeService.colors.background.css;
       this._ctx.fillRect(
         x * this._scaledCellWidth,
         y * this._scaledCellHeight,

addons/xterm-addon-canvas/src/CanvasAddon.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { IColorSet } from 'browser/Types';
 import { CanvasRenderer } from './CanvasRenderer';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
@@ -38,11 +38,11 @@ export class CanvasAddon extends Disposable implements ITerminalAddon {
     const coreBrowserService: ICoreBrowserService = core._coreBrowserService;
     const decorationService: IDecorationService = core._decorationService;
     const optionsService: IOptionsService = core.optionsService;
-    const colors: IColorSet = core._colorManager.colors;
+    const themeService: IThemeService = core._themeService;
     const screenElement: HTMLElement = core.screenElement;
     const linkifier = core.linkifier2;
 
-    this._renderer = new CanvasRenderer(terminal, colors, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService);
+    this._renderer = new CanvasRenderer(terminal, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService, themeService);
     this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
     renderService.setRenderer(this._renderer);
     renderService.handleResize(bufferService.cols, bufferService.rows);

addons/xterm-addon-canvas/src/CanvasRenderer.ts

@@ -6,8 +6,8 @@
 import { removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
 import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
-import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
-import { IColorSet, ILinkifier2 } from 'browser/Types';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { IColorSet, ILinkifier2, ReadonlyColorSet } from 'browser/Types';
 import { EventEmitter } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
@@ -31,7 +31,6 @@ export class CanvasRenderer extends Disposable implements IRenderer {
 
   constructor(
     private readonly _terminal: Terminal,
-    private _colors: IColorSet,
     private readonly _screenElement: HTMLElement,
     linkifier2: ILinkifier2,
     private readonly _bufferService: IBufferService,
@@ -40,15 +39,16 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     characterJoinerService: ICharacterJoinerService,
     coreService: ICoreService,
     private readonly _coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    private readonly _themeService: IThemeService
   ) {
     super();
     const allowTransparency = this._optionsService.rawOptions.allowTransparency;
     this._renderLayers = [
-      new TextRenderLayer(this._terminal, this._screenElement, 0, this._colors, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService),
-      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._colors, this._bufferService, this._coreBrowserService, decorationService, this._optionsService),
-      new LinkRenderLayer(this._terminal, this._screenElement, 2, this._colors, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService),
-      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._colors, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService)
+      new TextRenderLayer(this._terminal, this._screenElement, 0, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService, _themeService),
+      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._bufferService, this._coreBrowserService, decorationService, this._optionsService, _themeService),
+      new LinkRenderLayer(this._terminal, this._screenElement, 2, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService, _themeService),
+      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService, _themeService)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -92,15 +92,6 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     }
   }
 
-  public setColors(colors: IColorSet): void {
-    this._colors = colors;
-    // Clear layers and force a full render
-    for (const l of this._renderLayers) {
-      l.setColors(this._colors);
-      l.reset();
-    }
-  }
-
   public handleResize(cols: number, rows: number): void {
     // Update character and canvas dimensions
     this._updateDimensions();
@@ -130,7 +121,7 @@ export class CanvasRenderer extends Disposable implements IRenderer {
   public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
     this._runOperation(l => l.handleSelectionChanged(start, end, columnSelectMode));
     // Selection foreground requires a full re-render
-    if (this._colors.selectionForeground) {
+    if (this._themeService.colors.selectionForeground) {
       this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
     }
   }

addons/xterm-addon-canvas/src/CursorRenderLayer.ts

@@ -7,10 +7,10 @@ import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/shared/
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IBufferService, IOptionsService, ICoreService, IDecorationService } from 'common/services/Services';
 import { IEventEmitter } from 'common/EventEmitter';
-import { ICoreBrowserService } from 'browser/services/Services';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { Terminal } from 'xterm';
 import { toDisposable } from 'common/Lifecycle';
 
@@ -37,15 +37,15 @@ export class CursorRenderLayer extends BaseRenderLayer {
     terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
     private readonly _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
     bufferService: IBufferService,
     optionsService: IOptionsService,
     private readonly _coreService: ICoreService,
     coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    themeService: IThemeService
   ) {
-    super(terminal, container, 'cursor', zIndex, true, colors, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'cursor', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = {
       x: 0,
       y: 0,
@@ -146,7 +146,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     if (!this._coreBrowserService.isFocused) {
       this._clearCursor();
       this._ctx.save();
-      this._ctx.fillStyle = this._colors.cursor.css;
+      this._ctx.fillStyle = this._themeService.colors.cursor.css;
       const cursorStyle = this._optionsService.rawOptions.cursorStyle;
       if (cursorStyle && cursorStyle !== 'block') {
         this._cursorRenderers[cursorStyle](cursorX, viewportRelativeCursorY, this._cell);
@@ -211,30 +211,30 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _renderBarCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.fillStyle = this._colors.cursor.css;
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
     this._fillLeftLineAtCell(x, y, this._optionsService.rawOptions.cursorWidth);
     this._ctx.restore();
   }
 
   private _renderBlockCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.fillStyle = this._colors.cursor.css;
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
     this._fillCells(x, y, cell.getWidth(), 1);
-    this._ctx.fillStyle = this._colors.cursorAccent.css;
+    this._ctx.fillStyle = this._themeService.colors.cursorAccent.css;
     this._fillCharTrueColor(cell, x, y);
     this._ctx.restore();
   }
 
   private _renderUnderlineCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.fillStyle = this._colors.cursor.css;
+    this._ctx.fillStyle = this._themeService.colors.cursor.css;
     this._fillBottomLineAtCells(x, y);
     this._ctx.restore();
   }
 
   private _renderBlurCursor(x: number, y: number, cell: ICellData): void {
     this._ctx.save();
-    this._ctx.strokeStyle = this._colors.cursor.css;
+    this._ctx.strokeStyle = this._themeService.colors.cursor.css;
     this._strokeRectAtCell(x, y, cell.getWidth(), 1);
     this._ctx.restore();
   }

addons/xterm-addon-canvas/src/LinkRenderLayer.ts

@@ -6,8 +6,8 @@
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
-import { ICoreBrowserService } from 'browser/services/Services';
-import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { IColorSet, ILinkifierEvent, ILinkifier2, ReadonlyColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
 import { Terminal } from 'xterm';
@@ -19,14 +19,14 @@ export class LinkRenderLayer extends BaseRenderLayer {
     terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
     linkifier2: ILinkifier2,
     bufferService: IBufferService,
     optionsService: IOptionsService,
     decorationService: IDecorationService,
-    coreBrowserService: ICoreBrowserService
+    coreBrowserService: ICoreBrowserService,
+    themeService: IThemeService
   ) {
-    super(terminal, container, 'link', zIndex, true, colors, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'link', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
 
     this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
     this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
@@ -56,12 +56,12 @@ export class LinkRenderLayer extends BaseRenderLayer {
 
   private _handleShowLinkUnderline(e: ILinkifierEvent): void {
     if (e.fg === INVERTED_DEFAULT_COLOR) {
-      this._ctx.fillStyle = this._colors.background.css;
+      this._ctx.fillStyle = this._themeService.colors.background.css;
     } else if (e.fg && is256Color(e.fg)) {
       // 256 color support
-      this._ctx.fillStyle = this._colors.ansi[e.fg].css;
+      this._ctx.fillStyle = this._themeService.colors.ansi[e.fg].css;
     } else {
-      this._ctx.fillStyle = this._colors.foreground.css;
+      this._ctx.fillStyle = this._themeService.colors.foreground.css;
     }
 
     if (e.y1 === e.y2) {

addons/xterm-addon-canvas/src/SelectionRenderLayer.ts

@@ -5,9 +5,9 @@
 
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICoreBrowserService } from 'browser/services/Services';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { Terminal } from 'xterm';
 
 interface ISelectionState {
@@ -24,13 +24,13 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     terminal: Terminal,
     container: HTMLElement,
     zIndex: number,
-    colors: IColorSet,
     bufferService: IBufferService,
     coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService,
-    optionsService: IOptionsService
+    optionsService: IOptionsService,
+    themeService: IThemeService
   ) {
-    super(terminal, container, 'selection', zIndex, true, colors, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'selection', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
     this._clearState();
   }
 
@@ -102,8 +102,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     }
 
     this._ctx.fillStyle = (this._coreBrowserService.isFocused
-      ? this._colors.selectionBackgroundTransparent
-      : this._colors.selectionInactiveBackgroundTransparent).css;
+      ? this._themeService.colors.selectionBackgroundTransparent
+      : this._themeService.colors.selectionInactiveBackgroundTransparent).css;
 
     if (columnSelectMode) {
       const startCol = start[0];