diff --git a/src/browser/Decorations/OverviewRulerRenderer.ts b/src/browser/Decorations/OverviewRulerRenderer.ts
index b34b592d..b63a5aec 100644
--- a/src/browser/Decorations/OverviewRulerRenderer.ts
+++ b/src/browser/Decorations/OverviewRulerRenderer.ts
@@ -92,7 +92,7 @@ export class OverviewRulerRenderer extends Disposable {
       return;
     }
     this._ctx.lineWidth = 1;
-    this._ctx.fillStyle = decoration.options.overviewRulerOptions.color;
+    this._ctx.fillStyle = decoration.overviewRulerDecorationColor || decoration.options.overviewRulerOptions.color;
     this._ctx.fillRect(
       !decoration.options.overviewRulerOptions.position ||  decoration.options.overviewRulerOptions.position === 'left' ? 0 : decoration.options.overviewRulerOptions.position === 'right' ? renderSizes[SizeIndex.OUTER_SIZE] + renderSizes[SizeIndex.INNER_SIZE]: renderSizes[SizeIndex.OUTER_SIZE],
       Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)),
diff --git a/src/common/services/DecorationService.ts b/src/common/services/DecorationService.ts
index 911fd369..328c51d5 100644
--- a/src/common/services/DecorationService.ts
+++ b/src/common/services/DecorationService.ts
@@ -60,6 +60,8 @@ class Decoration extends Disposable implements IInternalDecoration {
   private _onDispose = this.register(new EventEmitter<void>());
   public readonly onDispose = this._onDispose.event;
 
+  public overviewRulerDecorationColor: string | undefined;
+
   constructor(
     public readonly options: IDecorationOptions
   ) {
diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts
index 24ba940e..88b2856e 100644
--- a/typings/xterm.d.ts
+++ b/typings/xterm.d.ts
@@ -438,6 +438,11 @@ declare module 'xterm' {
      * that.
      */
     element: HTMLElement | undefined;
+
+    /**
+     * The color for the decoration.
+     */
+    overviewRulerDecorationColor: string | undefined;
   }
 
   /*