Build out theme service more

src/browser/Terminal.ts

@@ -241,7 +241,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
     }
     // TODO: Have these listen to theme change
-    this._renderService?.setColors(this._themeService.colors);
     this.viewport?.handleThemeChange(this._themeService.colors);
   }
 

src/browser/renderer/shared/Types.d.ts

@@ -4,7 +4,7 @@
  */
 
 import { FontWeight, Terminal } from 'xterm';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { IDisposable } from 'common/Types';
 import { IEvent } from 'common/EventEmitter';
 
@@ -61,7 +61,7 @@ export interface IRenderer extends IDisposable {
   readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
 
   dispose(): void;
-  setColors(colors: IColorSet): void;
+  setColors(colors: ReadonlyColorSet): void;
   handleDevicePixelRatioChange(): void;
   handleResize(cols: number, rows: number): void;
   handleCharSizeChanged(): void;

src/browser/services/RenderService.ts

@@ -9,10 +9,11 @@ import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { IColorSet, IRenderDebouncerWithCallback } from 'browser/Types';
+import { IColorSet, IRenderDebouncerWithCallback, ReadonlyColorSet } from 'browser/Types';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
-import { ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { DebouncedIdleTask } from 'common/TaskQueue';
+import { ThemeService } from 'browser/services/ThemeService';
 
 interface ISelectionState {
   start: [number, number] | undefined;
@@ -58,7 +59,8 @@ export class RenderService extends Disposable implements IRenderService {
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IDecorationService decorationService: IDecorationService,
     @IBufferService bufferService: IBufferService,
-    @ICoreBrowserService coreBrowserService: ICoreBrowserService
+    @ICoreBrowserService coreBrowserService: ICoreBrowserService,
+    @IThemeService themeService: IThemeService
   ) {
     super();
 
@@ -89,6 +91,8 @@ export class RenderService extends Disposable implements IRenderService {
     // matchMedia query.
     this.register(addDisposableDomListener(coreBrowserService.window, 'resize', () => this.handleDevicePixelRatioChange()));
 
+    this.register(themeService.onChangeColors(e => this._handleChangeColors(e)));
+
     // Detect whether IntersectionObserver is detected and enable renderer pause
     // and resume based on terminal visibility if so
     if ('IntersectionObserver' in coreBrowserService.window) {
@@ -204,7 +208,7 @@ export class RenderService extends Disposable implements IRenderService {
     this._fullRefresh();
   }
 
-  public setColors(colors: IColorSet): void {
+  private _handleChangeColors(colors: ReadonlyColorSet): void {
     if (!this._renderer) {
       return;
     }

src/browser/services/Services.ts

@@ -74,7 +74,6 @@ export interface IRenderService extends IDisposable {
   resize(cols: number, rows: number): void;
   hasRenderer(): boolean;
   setRenderer(renderer: IRenderer): void;
-  setColors(colors: ReadonlyColorSet): void;
   handleDevicePixelRatioChange(): void;
   handleResize(cols: number, rows: number): void;
   handleCharSizeChanged(): void;
@@ -128,7 +127,9 @@ export interface IThemeService {
   serviceBrand: undefined;
 
   readonly colors: ReadonlyColorSet;
-  setTheme(theme?: ITheme): void;
+
+  readonly onChangeColors: IEvent<ReadonlyColorSet>;
+
   restoreColor(slot?: ColorIndex): void;
   /**
    * Allows external modifying of colors in the theme, this is used instead of {@link colors} to

src/browser/services/ThemeService.ts

@@ -6,6 +6,7 @@
 import { ColorManager } from 'browser/ColorManager';
 import { IThemeService } from 'browser/services/Services';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { EventEmitter } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
 import { IOptionsService, ITheme } from 'common/services/Services';
 import { ColorIndex } from 'common/Types';
@@ -18,29 +19,35 @@ export class ThemeService extends Disposable implements IThemeService {
 
   public get colors(): ReadonlyColorSet { return this._colorManager.colors; }
 
+  private readonly _onChangeColors = this.register(new EventEmitter<ReadonlyColorSet>());
+  public readonly onChangeColors = this._onChangeColors.event;
+
   constructor(
     @IOptionsService private readonly _optionsService: IOptionsService
   ) {
     super();
     this.register(this._optionsService.onOptionChange(key => {
       if (key === 'theme') {
-        this.setTheme(this._optionsService.rawOptions.theme);
+        this._setTheme(this._optionsService.rawOptions.theme);
       }
       this._colorManager.handleOptionsChange(key, this._optionsService.rawOptions[key]);
     }));
     this._colorManager.setTheme(this._optionsService.rawOptions.theme);
   }
 
-  public setTheme(theme: ITheme = {}): void {
+  private _setTheme(theme: ITheme = {}): void {
     this._colorManager.setTheme(theme);
+    this._onChangeColors.fire(this.colors);
   }
 
   public restoreColor(slot?: ColorIndex): void {
     this._colorManager.restoreColor(slot);
+    this._onChangeColors.fire(this.colors);
   }
 
   public modifyColors(callback: (colors: IColorSet) => void): void {
     callback(this._colorManager.colors);
-    // TODO: Fire event
+    // Assume the change happened
+    this._onChangeColors.fire(this.colors);
   }
 }