Support theming of overview ruler border

demo/client.ts

@@ -575,6 +575,7 @@ function initOptions(term: Terminal): void {
               cursor: '#333333',
               cursorAccent: '#ffffff',
               selectionBackground: '#add6ff',
+              overviewRulerBorder: '#aaaaaa',
               black: '#000000',
               blue: '#0451a5',
               brightBlack: '#666666',

src/browser/Types.ts

@@ -66,6 +66,7 @@ export interface IColorSet {
   selectionBackgroundOpaque: IColor;
   selectionInactiveBackgroundTransparent: IColor;
   selectionInactiveBackgroundOpaque: IColor;
+  overviewRulerBorder: IColor;
   ansi: IColor[];
   /** Maps original colors to colors that respect minimum contrast ratio. */
   contrastCache: IColorContrastCache;

src/browser/Viewport.ts

@@ -36,7 +36,6 @@ export class Viewport extends Disposable{
 
     // TODO: Support smooth scroll
     // TODO: Support fastScrollModifier?
-    // TODO: overviewRulerWidth should deprecated in favor of scrollBarWidth?
 
     this._scrollableElement = this.register(new DomScrollableElement(screenElement, {
       vertical: ScrollbarVisibility.Auto,

src/browser/decorations/OverviewRulerRenderer.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
-import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
@@ -51,6 +51,7 @@ export class OverviewRulerRenderer extends Disposable {
     @IDecorationService private readonly _decorationService: IDecorationService,
     @IRenderService private readonly _renderService: IRenderService,
     @IOptionsService private readonly _optionsService: IOptionsService,
+    @IThemeService private readonly _themeService: IThemeService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super();
@@ -67,6 +68,7 @@ export class OverviewRulerRenderer extends Disposable {
     this._registerDecorationListeners();
     this._registerBufferChangeListeners();
     this._registerDimensionChangeListeners();
+    this.register(this._themeService.onChangeColors(() => this._queueRefresh()));
     this.register(toDisposable(() => {
       this._canvas?.remove();
     }));
@@ -190,8 +192,7 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _renderRulerOutline(): void {
-    // TODO: Support customizing the color
-    this._ctx.fillStyle = '#000';
+    this._ctx.fillStyle = this._themeService.colors.overviewRulerBorder.css;
     this._ctx.fillRect(0, 0, 1, this._canvas.height);
   }
 

src/browser/renderer/shared/CharAtlasUtils.ts

@@ -21,6 +21,7 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
     selectionBackgroundOpaque: NULL_COLOR,
     selectionInactiveBackgroundTransparent: NULL_COLOR,
     selectionInactiveBackgroundOpaque: NULL_COLOR,
+    overviewRulerBorder: NULL_COLOR,
     // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
     // dynamic character atlas.
     ansi: colors.ansi.slice(),

src/browser/services/ThemeService.ts

@@ -28,6 +28,7 @@ const DEFAULT_SELECTION = {
   css: 'rgba(255, 255, 255, 0.3)',
   rgba: 0xFFFFFF4D
 };
+const DEFAULT_OVERVIEW_RULER_BORDER = css.toColor('#000000');
 
 export class ThemeService extends Disposable implements IThemeService {
   public serviceBrand: undefined;
@@ -57,6 +58,7 @@ export class ThemeService extends Disposable implements IThemeService {
       selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
       selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      overviewRulerBorder: DEFAULT_OVERVIEW_RULER_BORDER,
       ansi: DEFAULT_ANSI_COLORS.slice(),
       contrastCache: this._contrastCache,
       halfContrastCache: this._halfContrastCache
@@ -100,6 +102,7 @@ export class ThemeService extends Disposable implements IThemeService {
       const opacity = 0.3;
       colors.selectionInactiveBackgroundTransparent = color.opacity(colors.selectionInactiveBackgroundTransparent, opacity);
     }
+    colors.overviewRulerBorder = parseColor(theme.overviewRulerBorder, DEFAULT_OVERVIEW_RULER_BORDER);
     colors.ansi = DEFAULT_ANSI_COLORS.slice();
     colors.ansi[0] = parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);
     colors.ansi[1] = parseColor(theme.red, DEFAULT_ANSI_COLORS[1]);

src/common/services/Services.ts

@@ -263,6 +263,7 @@ export interface ITheme {
   selectionForeground?: string;
   selectionBackground?: string;
   selectionInactiveBackground?: string;
+  overviewRulerBorder?: string;
   black?: string;
   red?: string;
   green?: string;

typings/xterm.d.ts

@@ -368,6 +368,12 @@ declare module '@xterm/xterm' {
      * be transparent)
      */
     selectionInactiveBackground?: string;
+    /**
+     * The border color of the overview ruler. This visually separates the terminal from the scroll
+     * bar when {@link ITerminalOptions.overviewRulerWidth overviewRulerWidth} is set. When this is
+     * not set it defaults to black (#000000).
+     */
+    overviewRulerBorder?: string;
     /** ANSI black (eg. `\x1b[30m`) */
     black?: string;
     /** ANSI red (eg. `\x1b[31m`) */