Xterm.js: Support transparent backgrounds

[npezza93]

It looks as though starting with 365661704424f9a33b3a2cb4b85ad144948a86a9 setting the themes background to 'none' does not work. It just sets the background to black. If it helps at all I found changing this line: https://github.com/sourcelair/xterm.js/blob/c4da8325ace6e4bde77822377bf994d389a7c75a/src/renderer/TextRenderLayer.ts#L104 to let bg = this._colors.background fixed the issue but not sure if that is the correct solution to the problem.

[Tyriar]

We no longer support a transparent/no backgorund color tor not setting a background color. The reason for this is to support inverting colors correctly.

Is the main reason you want no background color to give an interesting background/partially transparent or something?

[npezza93]

Hey, @Tyriar, inside an electron app I am setting the vibrancy on Mac so the background is slightly transparent but I see your point. Xterm would have no idea if it is against a light background or dark background to invert correctly. Could we pass what the background is, so the invert works correctly, but opt not to render it?

Electron vibrancy example:

[lucat1]

AFAIK using an rgba color should work, right?(as long as xterm is able to parse rgba colors)

[npezza93]

@LucaT1 Yea I tried that and it almost works. You end up with the main background gone but each character still has a background.

[vincentwoo]

I am also interested in being able to specify a transparent background. Is there a demo on how to configure colors in general?

[npezza93]

I dont believe there is anything documented but you just pass the options under the theme key. Ex:

    xterm = new Terminal({
      theme: {
        foreground: '#ffffff',
        background: '#000',
        cursor: '#ffffff',
        selection: 'rgba(255, 255, 255, 0.3)',
        black: '#000000',
        red: '#e06c75',
        brightRed: '#e06c75',
        green: '#A4EFA1',
        brightGreen: '#A4EFA1',
        brightYellow: '#EDDC96',
        yellow: '#EDDC96',
        magenta: '#e39ef7',
        brightMagenta: '#e39ef7',
        cyan: '#5fcbd8',
        brightBlue: '#5fcbd8',
        brightCyan: '#5fcbd8',
        blue: '#5fcbd8',
        white: '#d0d0d0',
        brightBlack: '#808080',
        brightWhite: '#ffffff'
      }
    })

[Tyriar]

@npezza93 the characters are drawn with a background in order to support sub-pixel anti-aliasing. You can no longer do a transparent or partially transparent background. We could support it but that would mean text is less crisp as you cannot support sub-pixel AA on a transparent background.

PRs welcome, you would need to expose a setting to make the text render layer pass true as an alpha layer https://github.com/sourcelair/xterm.js/blob/313d1e6fecd98a4a5e8dddebb832a6c4c16a828d/src/renderer/TextRenderLayer.ts#L28, then make sure cells get cleared and their background redrawn properly.

[npezza93]

🎉

[gozeon]

@npezza93 @Tyriar
hi, the theme not allow rgba or hsla.

Color: rgba(255, 255, 255, 0.3) is using transparency, but allowTransparency is false. Using fallback #000000.

[Tyriar]

@gozeon make allowTransparency true: new Terminal({ allowTransparency: true })

[gozeon]

@Tyriar thinks

[faymek]

Actually, the following code works:

const term = new Terminal({
    theme: {
        foreground: "#EEEEEE",
        background: "#300a2480",
        cursor: "#CFF5DB"
    },
    allowTransparency: true
});

But when I changed #300a2480 to rgba(48,10,36,0.8), the actual background become rgba(0,0,0,0) . Wait for an explanation. Thanks.

[Tyriar]

@faymek that was a regression that's already fixed in master https://github.com/xtermjs/xterm.js/issues/2620