Theming: New color keys introduced in VS Code 1.13

theme.md

Theming

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.