Viewport listen to theme service

src/browser/Terminal.ts

@@ -240,8 +240,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
           break;
       }
     }
-    // TODO: Have these listen to theme change
-    this.viewport?.handleThemeChange(this._themeService.colors);
   }
 
   protected _setup(): void {
@@ -310,9 +308,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
         }
         break;
       case 'tabStopWidth': this.buffers.setupTabStops(); break;
-      case 'theme':
-        this._setTheme(this.optionsService.rawOptions.theme);
-        break;
     }
   }
 
@@ -531,11 +526,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.viewport = this._instantiationService.createInstance(Viewport,
       (amount: number) => this.scrollLines(amount, true, ScrollSource.VIEWPORT),
       this._viewportElement,
-      this._viewportScrollArea,
-      this.element
+      this._viewportScrollArea
     );
-    // TODO: Listen to theme service event
-    this.viewport.handleThemeChange(this._themeService.colors);
     this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea()));
     this.register(this.viewport);
 
@@ -616,15 +608,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     return this._instantiationService.createInstance(DomRenderer, this._themeService!.colors, this.element!, this.screenElement!, this._viewportElement!, this.linkifier2);
   }
 
-  /**
-   * Sets the theme on the renderer. The renderer must have been initialized.
-   * @param theme The theme to set.
-   */
-  private _setTheme(theme: ITheme): void {
-    // TODO: Listen to theme service events
-    this.viewport?.handleThemeChange(this._themeService!.colors);
-  }
-
   /**
    * Bind certain mouse events to the terminal.
    * By default only 3 button + wheel up/down is ativated. For higher buttons

src/browser/Types.d.ts

@@ -152,7 +152,6 @@ export interface IViewport extends IDisposable {
   handleWheel(ev: WheelEvent): boolean;
   handleTouchStart(ev: TouchEvent): void;
   handleTouchMove(ev: TouchEvent): boolean;
-  handleThemeChange(colors: ReadonlyColorSet): void;
 }
 
 export interface ILinkifierEvent {

src/browser/Viewport.ts

@@ -5,8 +5,8 @@
 
 import { Disposable } from 'common/Lifecycle';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { IColorSet, IViewport } from 'browser/Types';
-import { ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { IColorSet, IViewport, ReadonlyColorSet } from 'browser/Types';
+import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { IBufferService, IOptionsService } from 'common/services/Services';
 import { IBuffer } from 'common/buffer/Types';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
@@ -52,12 +52,12 @@ export class Viewport extends Disposable implements IViewport {
     private readonly _scrollLines: (amount: number) => void,
     private readonly _viewportElement: HTMLElement,
     private readonly _scrollArea: HTMLElement,
-    private readonly _element: HTMLElement,
     @IBufferService private readonly _bufferService: IBufferService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IRenderService private readonly _renderService: IRenderService,
-    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @IThemeService themeService: IThemeService
   ) {
     super();
 
@@ -73,11 +73,14 @@ export class Viewport extends Disposable implements IViewport {
     this._renderDimensions = this._renderService.dimensions;
     this.register(this._renderService.onDimensionsChange(e => this._renderDimensions = e));
 
+    this._handleThemeChange(themeService.colors);
+    this.register(themeService.onChangeColors(e => this._handleThemeChange(e)));
+
     // Perform this async to ensure the ICharSizeService is ready.
     setTimeout(() => this.syncScrollArea(), 0);
   }
 
-  public handleThemeChange(colors: IColorSet): void {
+  private _handleThemeChange(colors: ReadonlyColorSet): void {
     this._viewportElement.style.backgroundColor = colors.background.css;
   }