Terminal doesn't take editor background color into account

Forked off case from @sagebind in https://github.com/microsoft/vscode/issues/128295#issuecomment-952194513

I can consistently reproduce this today specifically with terminals in the editor area (similar to https://github.com/microsoft/vscode/issues/127156) as I experience it every day for the past few months. Here’s full reproduction steps:

• Install a fresh copy of VS Code Insiders (no extensions or customizations). At time of writing I reproduced this with commit dc1a6699060423b8c4d2ced736ad70195378fddf.
• Install a theme with a different background color for panel terminal and editor. In this case, https://marketplace.visualstudio.com/items?itemName=swashata.beautiful-ui. Note that this is a theme pack, but can be reproduced with most themes in this pack. The theme shown below is βui - One Dark.
• Create a new terminal in the editor area.
• Ensure that GPU acceleration is on (terminal.integrated.gpuAcceleration).
• Observe the background color discrepancy:

Using the developer tools, you can see that while .editor-container has an inline style of background-color: rgb(38, 42, 49);, the inner element .xterm-viewport has the inline style of background-color: rgb(24, 26, 30);, which does not match the editor area.

Somehow the setting terminal.integrated.gpuAcceleration is actually involved here, because when changed to off, suddenly everything looks correct:

Though the background color of the inner element .xterm-viewport is still the wrong value, it seems to no longer have an impact. I am presuming this is still a VS Code bug, but I suppose that somehow this could be an issue with the theme itself though I’m not sure how.

This test was done on macOS 11.6.

[gukandrew]

Same here on apple silicon (MBP 2020 m2).

"terminal.integrated.gpuAcceleration": "off"

fixed problem, but for sure it’s not best solution 😦

[sagebind]

So basically, the only reason that setting terminal.background “fixes” the problem is because it causes the terminal to use terminal.background as the background color instead of editor.background, and causes it to actually become the same as editorPane.background via alpha transparency. But if the terminal defaults to editor.background in a terminal editor, I would expect the margin around the terminal to also be editor.background, not editorPane.background.

I think enabling Zen Mode helps visually show why the current behavior is wrong:

(Of course, in all places where editor.background is being used here, I’d expect it to probably use terminal.background instead if set.)

It seems like at the very least, the bug starts here:

https://github.com/microsoft/vscode/blob/dec7735080b74f3d8eba8d0bcb0a1c0d96f96c1f/src/vs/workbench/contrib/terminal/browser/media/terminal.css#L63-L65

In light of https://github.com/microsoft/vscode/issues/127156 I’d expect this to be

    background-color: var(--vscode-terminal-background, --vscode-editor-background);