Skip to content

Instantly share code, notes, and snippets.

@bpasero
Created June 9, 2017 08:22
Show Gist options
  • Save bpasero/f865eed5d102761f596865fb43a47565 to your computer and use it in GitHub Desktop.
Save bpasero/f865eed5d102761f596865fb43a47565 to your computer and use it in GitHub Desktop.
Theming: New color keys introduced in VS Code 1.13

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment