force alpha to 1 when using background color as inverted foreground color.

src/browser/Color.test.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { blend, fromCss, toPaddedHex, toCss, toRgba } from 'browser/Color';
+import { blend, fromCss, toPaddedHex, toCss, toRgba, fromRgba } from 'browser/Color';
 
 describe('Color', () => {
   describe('blend', () => {
@@ -135,4 +135,26 @@ describe('Color', () => {
       assert.equal(toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff);
     });
   });
+
+  describe('fromRgba', () => {
+    it('should convert an rgba number to an rgba array', () => {
+      assert.deepEqual(fromRgba(0x00000000), [0x00, 0x00, 0x00, 0x00]);
+      assert.deepEqual(fromRgba(0x10101010), [0x10, 0x10, 0x10, 0x10]);
+      assert.deepEqual(fromRgba(0x20202020), [0x20, 0x20, 0x20, 0x20]);
+      assert.deepEqual(fromRgba(0x30303030), [0x30, 0x30, 0x30, 0x30]);
+      assert.deepEqual(fromRgba(0x40404040), [0x40, 0x40, 0x40, 0x40]);
+      assert.deepEqual(fromRgba(0x50505050), [0x50, 0x50, 0x50, 0x50]);
+      assert.deepEqual(fromRgba(0x60606060), [0x60, 0x60, 0x60, 0x60]);
+      assert.deepEqual(fromRgba(0x70707070), [0x70, 0x70, 0x70, 0x70]);
+      assert.deepEqual(fromRgba(0x80808080), [0x80, 0x80, 0x80, 0x80]);
+      assert.deepEqual(fromRgba(0x90909090), [0x90, 0x90, 0x90, 0x90]);
+      assert.deepEqual(fromRgba(0xa0a0a0a0), [0xa0, 0xa0, 0xa0, 0xa0]);
+      assert.deepEqual(fromRgba(0xb0b0b0b0), [0xb0, 0xb0, 0xb0, 0xb0]);
+      assert.deepEqual(fromRgba(0xc0c0c0c0), [0xc0, 0xc0, 0xc0, 0xc0]);
+      assert.deepEqual(fromRgba(0xd0d0d0d0), [0xd0, 0xd0, 0xd0, 0xd0]);
+      assert.deepEqual(fromRgba(0xe0e0e0e0), [0xe0, 0xe0, 0xe0, 0xe0]);
+      assert.deepEqual(fromRgba(0xf0f0f0f0), [0xf0, 0xf0, 0xf0, 0xf0]);
+      assert.deepEqual(fromRgba(0xffffffff), [0xff, 0xff, 0xff, 0xff]);
+    });
+  });
 });

src/browser/Color.ts

@@ -47,3 +47,7 @@ export function toRgba(r: number, g: number, b: number, a: number = 0xFF): numbe
   // >>> 0 forces an unsigned int
   return (r << 24 | g << 16 | b << 8 | a) >>> 0;
 }
+
+export function fromRgba(value: number): [number, number, number, number] {
+  return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
+}

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -11,6 +11,7 @@ import { LRUMap } from 'browser/renderer/atlas/LRUMap';
 import { isFirefox, isSafari } from 'common/Platform';
 import { IColor } from 'browser/Types';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+import { fromRgba, toCss } from 'browser/Color';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -253,7 +254,13 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
     this._tmpCtx.textBaseline = 'middle';
 
-    this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
+    const fgColor = this._getForegroundColor(glyph);
+    this._tmpCtx.fillStyle = fgColor.css;
+
+    if (glyph.fg === INVERTED_DEFAULT_COLOR) {
+      const rgba = fromRgba(fgColor.rgba);
+      this._tmpCtx.fillStyle = toCss(rgba[0], rgba[1], rgba[2]);
+    }
 
     // Apply alpha to dim the character
     if (glyph.dim) {

src/browser/renderer/dom/DomRenderer.ts

@@ -11,6 +11,7 @@ import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
+import { fromRgba, toCss } from 'browser/Color';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -229,8 +230,9 @@ export class DomRenderer extends Disposable implements IRenderer {
           `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
           `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
     });
+    const rgba = fromRgba(this._colors.background.rgba);
     styles +=
-        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${this._colors.background.css}; }` +
+        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${toCss(rgba[0], rgba[1], rgba[2])}; }` +
         `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
 
     this._themeStyleElement.innerHTML = styles;