We received a lot of feedback for our workbench theming support and are happy to see more and more themes adopting the workbench colors! During this milestone, we added some new colors as well as did some tweaks to existing colors.
These colors can be set by themes or by the user with the workbench.colorCustomizations setting.
New workbench colors introduced:
| Key | Description |
|---|---|
selection.background |
The background color of text selections in the workbench (for input fields or text areas). Note that this does not apply to selections within the editor and the terminal. |
input.placeholderForeground |
Input box foreground color for placeholder text. |
list.inactiveSelectionForeground |
List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not. |
list.hoverForeground |
List/Tree foreground when hovering over items using the mouse. |
list.focusForeground |
List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not. |
badge.foreground |
Badge foreground color. Badges are small information labels, for example, search results count. |
badge.background |
Badge background color. |
progressBar.background |
Background color of the progress bar shown for long running operations. |
sideBar.foreground |
Side Bar foreground color. The Side Bar is the container for views like Explorer and Search. |
sideBar.border |
Side Bar border color on the side separating the editor. |
sideBarSectionHeader.foreground |
Side Bar section header foreground color. |
statusBar.border |
Status Bar border color separating the Status Bar and editor. The Status Bar is at the bottom of the window. |
statusBar.debuggingForeground |
Status Bar foreground color when a program is being debugged. |
statusBar.noFolderForeground |
Status Bar foreground color when no folder is opened. |
activityBar.border |
Activity Bar border color with the Side Bar. The Activity Bar is on the far left or right and lets you switch between views of the Side Bar. |
extensionButton.prominentForeground |
Extension view button foreground color (for example Install button). |
extensionButton.prominentBackground |
Extension view button background color. |
extensionButton.prominentHoverBackground |
Extension view button background hover color. |
errorForeground |
Overall foreground color for error messages. This color is only used if not overridden by a component. |
tab.unfocusedActiveForeground |
Active tab foreground color in an inactive editor group. |
tab.unfocusedInactiveForeground |
Inactive tab foreground color in an inactive editor group. |
editorGroupHeader.tabsBorder |
Border color of the editor group title header when tabs are enabled. Editor groups are the containers of editors. |
welcomePage.buttonBackground |
Background color for the buttons on the Welcome page. |
welcomePage.buttonHoverBackground |
Hover background color for the buttons on the Welcome page. |
walkThrough.embeddedEditorBackground |
Background color for the embedded editors on the Interactive Playground. |
terminal.background |
The background of the Integrated Terminal's viewport. |
terminal.foreground |
The default foreground color of the Integrated Terminal. |
New editor colors introduced:
| Key | Description |
|---|---|
editorCodeLens.foreground |
Foreground color of an editor CodeLens. |
editorBracketMatch.background |
Background color behind matching brackets. |
editorBracketMatch.border |
Color for matching brackets boxes. |
editorRuler.foreground |
Color of the editor rulers. |
editorOverviewRuler.border |
Color of the overview ruler border. |
editorWidgetBorder |
Border color of the editor widget. |
editorError.foreground |
Foreground color of error squiggles in the editor. |
editorError.border |
Border color of error squiggles in the editor. |
editorWarning.foreground |
Foreground color of warning squiggles in the editor. |
editorWarning.border |
Border color of warning squiggles in the editor. |
peekViewEditorGutter.background |
Background color of the gutter in the peek view editor. |
editorGutter.background |
Background color of the editor gutter. The gutter contains the glyph margins and the line numbers. |
editorGutter.modifiedBackground |
Editor gutter background color for lines that are modified. |
editorGutter.addedBackground |
Editor gutter background color for lines that are added. |
editorGutter.deletedBackground |
Editor gutter background color for lines that are deleted. |
merge.currentHeaderBackground |
Current header background in inline merge conflicts. |
merge.currentContentBackground |
Current content background in inline merge conflicts. |
merge.incomingHeaderBackground |
Incoming header background in inline merge conflicts. |
merge.incomingContentBackground |
Incoming content background in inline merge conflicts. |
merge.border |
Border color on headers and the splitter in inline merge conflicts. |
editorOverviewRuler.currentContentForeground |
Current overview ruler foreground for inline merge conflicts. |
editorOverviewRuler.incomingContentForeground |
Incoming overview ruler foreground for inline merge conflicts. |
Existing color behavior changes:
| Key | Description |
|---|---|
panel.border |
Now overwrites the value of contrastBorder, allowing a more specific color if contrastBorder is set. |
tab.border |
Now overwrites the value of contrastBorder, allowing a more specific color if contrastBorder is set. |
editorGroup.border |
Now overwrites the value of contrastBorder, allowing a more specific color if contrastBorder is set. |
list.* |
All list colors can now be set even in the presence of contrastBorder and contrastActiveBorder. |