Change:
Forked off case from in I can consistently reproduce this today specifically with terminals in the editor area (similar to ) 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 . Install a theme with a different background color for panel terminal and editor. In this case, Note that this is a theme pack, but can be reproduced with most themes in this pack. The theme shown below is . Create a new terminal in the editor area. Ensure that GPU acceleration is (). Observe the background color discrepancy: <img width="1552" alt="Screen Shot 2021-10-26 at 1 12 41 PM" src="https://user-"Using the developer tools, you can see that while has an inline style of , the inner element has the inline style of , which does not match the editor area. <img width="1552" alt="Screen Shot 2021-10-26 at 1 16 14 PM" src="https://user-"Somehow the setting is actually involved here, because when changed to , suddenly everything looks correct: <img width="1552" alt="Screen Shot 2021-10-26 at 1 18 14 PM" src="https://user-"Though the background color of the inner element 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.
So looking deeper into this it seems like the background color of the terminal area in this theme comes from the color defined here: This then seems to be used here: But this behavior doesn't make a whole lot of sense, because using as the background color for a terminal editor is almost certainly going to look bad if it is defined and differs from since the terminal doesn't actually fill the entire space of the editor. One option would be to simply not have apply to terminals in the editor area, and have terminal editors always use the same background color as normal editors. With this theme that would look like this: <img width="1552" alt="Screen Shot 2021-10-27 at 2 11 13 PM" src="https://user-"I think a simple patch like this would do it: Alternatively, we could say that should be respected for terminal editors, in which case the terminal editor should also be changing background colors based on the editor type. This would mimic the behavior that has on terminals in the panel area. With this theme that instead would look like this: <img width="1552" alt="Screen Shot 2021-10-27 at 2 12 37 PM" src="https://user-"Based on my reading of the code, I think this could be done by checking the active editor type in the editor group view when deciding the background color, which is done here: and could be changed to: I don't have a strong preference between these two either way as both has their merits, but the latter seems probably more consistent, though requires more implementation detail shenanigans. I don't know why doesn't seem to take any effect when , that seems like some other problem. Maybe it is because that terminal renderer has a "transparent background" by default?
Same here on apple silicon (MBP 2020 m2). fixed problem, but for sure it's not best solution :(
Same here :/ MBP Pro 2018, macOS 12.1, VS Code 1.63.2. It was probably good until the last update. After change looks fine again.
For anyone who still cares about this and wants to use terminal editors with a theme that has two different colors for the editor area and the panel area, you can fix this yourself by adding this to your settings: This forces the terminal background color to be transparent, and to inherit whatever background color of the area where the terminal is shown. So terminal editors will have the same color as normal editors, and the terminal in the panel will have the same color as the panel. This is maybe not as nice as having terminal editors being a different color, but at least there's no ugly border where the colors clash against each other. Note that I still consider this an active bug.
The original issue seems to be fixed now so closing. As for the terminal/editor background conflicting, that's by design and it's the reason a theme would set terminal.background. If they only care about the panel's background they would only set that key and terminal.background will fallback to either editor, panel or side bar's background depending on the location. As mentioned, this is a good workaround if the theme doesn't do the colors like you would like:
I'm not sure you are understanding the bug. To illustrate: <img width="1552" alt="--74f8-4291-b7ac-" src="https://user-"In this diagram, the is what I am calling the bug, not any of the colors being used. I would expect the margin to match the color of the terminal for visual consistency. I can't see how the current behavior is useful to anyone, neither users nor theme developers. I decided to look at this again to see if I could figure out more about what is going on and I think I did. I think the problem is actually demonstrated by this visualization: <img width="1310" alt="Screen Shot 2022-11-08 at 13 50 16" src="https://user-"The underlying theme already has set, but I've changed it to a more obvious color to show the problem. This theme actually does not have set at all. Note how everything inherits as the background color, and aside from the garish color, it looks "normal", except for terminal tabs. The green border around the terminal itself is actually apparently , which is bleeding through the padding around the terminal renderer. Except again, this happens only for terminal tabs. does not "bleed through" on any other kind of tab that I tested. You can see in my screenshot that there is no green anywhere else (representing ). I suspect this is what causes the ugly mismatched color border around terminal tabs on some themes, because theme developers do not expect the color of has to be the same as either or in order to look consistent, which it isn't the case anywhere else in VSCode. So it seems like the fix is that the margin/padding area that surrounds the terminal in a terminal tab should be the color of if set, otherwise should definitely be the color of , same as other editors. I realize I sound like a stick in the mud, but as a heavy user of terminal tabs this visual bug has always bothered me, and I did not expect to see resistance for it being fixed. If I opened a PR myself to fix this, would the VSCode team be interested in accepting it? Because unless I'm missing something it seems to me just a bug, plain and simple, and not a design problem of particular themes.
So basically, the only reason that setting "fixes" the problem is because it causes the terminal to use as the background color instead of , and causes it to actually become the same as via alpha transparency. But if the terminal defaults to in a terminal editor, I would expect the margin around the terminal to also be , not . I think enabling Zen Mode helps visually show why the current behavior is wrong: <img width="1728" alt="Screen Shot 2022-11-08 at 14 16 06" src="https://user-"(Of course, in all places where is being used here, I'd expect it to probably use instead if set.) It seems like at the very least, the bug starts here: In light of I'd expect this to be
Oh I couldn't reproduce it before but can now by dragging and dropping into the editor area, reopening
Repro: Install the Sapphire theme - has editorPane.background and panel.background defined, but not terminal.background Open the terminal panel Create a second tab Drag the tab into the editor, the border around the terminal should be the same color
This was meant to be handled here:
PR fixing it

Discussion:
this._container = container; this._container.appendChild(this._wrapperElement); this._onDidAttachToElement.fire(this._container); <ins> this.xterm?.refresh(); </ins> setTimeout(() => this._initDragAndDrop(container)); }

} attachToElement(container: HTMLElement): HTMLElement { <del> // Update the theme when attaching as the terminal location could have changed this._updateTheme(); </del> if (!this._container) { this.raw.open(container); }