Render dim bg in all renderers

Fixes #3534

src/browser/renderer/TextRenderLayer.ts

@@ -14,6 +14,7 @@ import { CellData } from 'common/buffer/CellData';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
 import { ICharacterJoinerService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
+import { color, css } from 'common/Color';
 
 /**
  * This CharData looks like a null character, which will forc a clear and render
@@ -177,6 +178,14 @@ export class TextRenderLayer extends BaseRenderLayer {
         nextFillStyle = this._colors.ansi[cell.getBgColor()].css;
       }
 
+      // Apply dim to the background, this is relatively slow as the CSS is re-parsed but dim is
+      // rarely used
+      if (nextFillStyle && cell.isDim()) {
+        console.log('old', nextFillStyle);
+        nextFillStyle = color.multiplyOpacity(css.toColor(nextFillStyle), 0.5).css;
+        console.log('new', nextFillStyle);
+      }
+
       // Get any decoration foreground/background overrides, this must be fetched before the early
       // exist but applied after inverse
       let isTop = false;

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -249,6 +249,13 @@ export class DomRendererRowFactory {
           }
       }
 
+      // If there is no background override by now it's the original color, so apply dim if needed
+      if (!bgOverride) {
+        if (cell.isDim()) {
+          bgOverride = color.multiplyOpacity(resolvedBg, 0.5);
+        }
+      }
+
       // Foreground
       switch (fgColorMode) {
         case Attributes.CM_P16:

src/common/Color.ts

@@ -84,6 +84,11 @@ export namespace color {
     };
   }
 
+  export function multiplyOpacity(color: IColor, factor: number): IColor {
+    const a = color.rgba & 0xFF;
+    return opacity(color, (a * factor) / 0xFF);
+  }
+
   export function toColorRGB(color: IColor): IColorRGB {
     return [(color.rgba >> 24) & 0xFF, (color.rgba >> 16) & 0xFF, (color.rgba >> 8) & 0xFF];
   }