Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndrianD/6921d1b7be81462522a6face815c255f to your computer and use it in GitHub Desktop.
Save AndrianD/6921d1b7be81462522a6face815c255f to your computer and use it in GitHub Desktop.
A list of all Visual Studio Code customizable colors, grouped by UI region. Copy and paste into User Settings (comments are allowed) to tweak an existing theme or work on your own.
"workbench.colorCustomizations": {
// Contrast Colors - The contrast colors are typically only set for high contrast themes. If set, they add an additional border around items across the UI to increase the contrast.
"contrastActiveBorder": "",
"contrastBorder": "",
// Base Colors
"focusBorder": "",
"foreground": "",
"widget.shadow": "",
"selection.background": "",
"descriptionForeground": "",
"errorForeground": "",
// Text Colors — Colors inside a text document, such as the welcome page.
"textBlockQuote.background": "",
"textBlockQuote.border": "",
"textCodeBlock.background": "",
"textLink.activeForeground": "",
"textLink.foreground": "",
"textPreformat.foreground": "",
"textSeparator.foreground": "",
// Button Control — A set of colors for button widgets such as Open Folder button in the Explorer of a new window.
"button.background": "",
"button.foreground": "",
"button.hoverBackground": "",
// Dropdown Control — A set of colors for all dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the dropdown control is not used on macOS currently.
"dropdown.background": "",
"dropdown.listBackground": "",
"dropdown.border": "",
"dropdown.foreground": "",
// Input Control — Colors for input controls such as in the Search view or the Find/Replace dialog.
"input.background": "",
"input.border": "",
"input.foreground": "",
"input.placeholderForeground": "",
"inputOption.activeBorder": "",
"inputValidation.errorBackground": "",
"inputValidation.errorBorder": "",
"inputValidation.infoBackground": "",
"inputValidation.infoBorder": "",
"inputValidation.warningBackground": "",
"inputValidation.warningBorder": "",
// Scroll Bar Control
"scrollbar.shadow": "",
"scrollbarSlider.activeBackground": "",
"scrollbarSlider.background": "",
"scrollbarSlider.hoverBackground": "",
// Badge — Badges are small information labels, for example, search results count.
"badge.foreground": "",
"badge.background": "",
// Progress Bar
"progressBar.background": "",
// Lists and Trees — Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.
"list.activeSelectionBackground": "",
"list.activeSelectionForeground": "",
"list.dropBackground": "",
"list.focusBackground": "",
"list.focusForeground": "",
"list.highlightForeground": "",
"list.hoverBackground": "",
"list.hoverForeground": "",
"list.inactiveSelectionBackground": "",
"list.inactiveSelectionForeground": "",
"list.inactiveFocusBackground": "",
"list.invalidItemForeground": "",
// Activity Bar — The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.
"activityBar.background": "",
"activityBar.dropBackground": "",
"activityBar.foreground": "",
"activityBar.border": "",
"activityBarBadge.background": "",
"activityBarBadge.foreground": "",
// Side Bar — The Side Bar contains views like the Explorer and Search.
"sideBar.background": "",
"sideBar.foreground": "",
"sideBar.border": "",
"sideBar.dropBackground": "",
"sideBarTitle.foreground": "",
"sideBarSectionHeader.background": "",
"sideBarSectionHeader.foreground": "",
// Editor Groups & Tabs — Editor Groups are the containers of editors. There can be up to three editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.
"editorGroup.background": "",
"editorGroup.border": "",
"editorGroup.dropBackground": "",
"editorGroupHeader.noTabsBackground": "",
"editorGroupHeader.tabsBackground": "",
"editorGroupHeader.tabsBorder": "",
"tab.activeBackground": "",
"tab.activeForeground": "",
"tab.border": "",
"tab.activeBorder": "",
"tab.unfocusedActiveBorder": "",
"tab.inactiveBackground": "",
"tab.inactiveForeground": "",
"tab.unfocusedActiveForeground": "",
"tab.unfocusedInactiveForeground": "",
"tab.hoverBackground": "",
"tab.unfocusedHoverBackground": "",
"tab.hoverBorder": "",
"tab.unfocusedHoverBorder": "",
// Editor Colors — for syntax highlighting, use the editor.tokenColorCustomizations setting. All other editor colors are listed here
"editor.background": "",
"editor.foreground": "",
"editorLineNumber.foreground": "",
"editorLineNumber.activeForeground": "",
"editorCursor.background": "",
"editorCursor.foreground": "",
"editor.selectionBackground": "",
"editor.selectionForeground": "",
"editor.inactiveSelectionBackground": "",
"editor.selectionHighlightBackground": "",
"editor.selectionHighlightBorder": "",
"editor.wordHighlightBackground": "",
"editor.wordHighlightBorder": "",
"editor.worldHighlightStrongBackground": "",
"editor.wordHighlightStrongBorder": "",
"editor.findMatchBackground": "",
"editor.findMatchHighlightBackground": "",
"editor.findRangeHighlightBackground": "",
"editor.findMatchBorder": "",
"editor.findMatchHighlightBorder": "",
"editor.hoverHighlightBackground": "",
"editor.lineHighlightBackground": "",
"editor.lineHighlightBorder": "",
"editorLink.activeForeground": "",
"editor.rangeHighlightBackground": "",
"editor.rangeHighlightBorder": "",
"editorWhitespace.foreground": "",
"editorIndentGuide.background": "",
"editorRuler.foreground": "",
"editorCodeLens.foreground": "",
"editorBracketMatch.background": "",
"editorBracketMatch.border": "",
"editorOverviewRuler.border": "",
"editorOverviewRuler.findMatchForeground": "",
"editorOverviewRuler.rangeHighlightForeground": "",
"editorOverviewRuler.selectionHighlightForeground": "",
"editorOverviewRuler.wordHighlightForeground": "",
"editorOverviewRuler.wordHighlightStrongForeground": "",
"editorOverviewRuler.modifiedForeground": "",
"editorOverviewRuler.addedForeground": "",
"editorOverviewRuler.deletedForeground": "",
"editorOverviewRuler.errorForeground": "",
"editorOverviewRuler.warningForeground": "",
"editorOverviewRuler.infoForeground": "",
"editorError.foreground": "",
"editorError.border": "",
"editorWarning.foreground": "",
"editorWarning.border": "",
"editorInfo.foreground": "",
"editorInfo.border": "",
"editorHint.foreground": "",
"editorHint.border": "",
"editorGutter.background": "",
"editorGutter.modifiedBackground": "",
"editorGutter.addedBackground": "",
"editorGutter.deletedBackground": "",
// Diff Editor Colors — For coloring inserted and removed text, use either a background or a border color but not both.
"diffEditor.insertedTextBackground": "",
"diffEditor.insertedTextBorder": "",
"diffEditor.removedTextBackground": "",
"diffEditor.removedTextBorder": "",
// Editor Widget Colors - The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover
"editorWidget.background": "",
"editorWidget.border": "",
"editorSuggestWidget.background": "",
"editorSuggestWidget.border": "",
"editorSuggestWidget.foreground": "",
"editorSuggestWidget.highlightForeground": "",
"editorSuggestWidget.selectedBackground": "",
"editorHoverWidget.background": "",
"editorHoverWidget.border": "",
"debugExceptionWidget.background": "",
"debugExceptionWidget.border": "",
"editorMarkerNavigation.background": "",
"editorMarkerNavigationError.background": "",
"editorMarkerNavigationWarning.background": "",
"editorMarkerNavigationInfo.background": "",
// Peek View Colors — Peek views are used to show references and declarations as a view inside the editor.
"peekView.border": "",
"peekViewEditor.background": "",
"peekViewEditorGutter.background": "",
"peekViewEditor.matchHighlightBackground": "",
"peekViewResult.background": "",
"peekViewResult.fileForeground": "",
"peekViewResult.lineForeground": "",
"peekViewResult.matchHighlightBackground": "",
"peekViewResult.selectionBackground": "",
"peekViewResult.selectionForeground": "",
"peekViewTitle.background": "",
"peekViewTitleDescription.foreground": "",
"peekViewTitleLabel.foreground": "",
// Merge Conflicts — Merge conflict decorations are shown when the editor contains special diff ranges.
"merge.currentHeaderBackground": "",
"merge.currentContentBackground": "",
"merge.incomingHeaderBackground": "",
"merge.incomingContentBackground": "",
"merge.border": "",
"merge.commonContentBackground": "",
"merge.commonHeaderBackground": "",
"editorOverviewRuler.currentContentForeground": "",
"editorOverviewRuler.currentContentForeground": "",
"editorOverviewRuler.commonContentForeground": "",
// Panel Colors — Panels are shown below the editor area and contain views like Output and Integrated Terminal.
"panel.background": "",
"panel.border": "",
"panel.dropBackground": "",
"panelTitle.activeBorder": "",
"panelTitle.activeForeground": "",
"panelTitle.inactiveForeground": "",
// Status Bar Colors — The Status Bar is shown in the bottom of the workbench.
"statusBar.background": "",
"statusBar.foreground": "",
"statusBar.border": "",
"statusBar.debuggingBackground": "",
"statusBar.debuggingForeground": "",
"statusBar.debuggingBorder": "",
"statusBar.noFolderForeground": "",
"statusBar.noFolderBackground": "",
"statusBar.noFolderBorder": "",
"statusBarItem.activeBackground": "",
"statusBarItem.hoverBackground": "",
"statusBarItem.prominentBackground": "",
"statusBarItem.prominentHoverBackground": "",
// Title Bar Colors (macOS)
"titleBar.activeBackground": "",
"titleBar.activeForeground": "",
"titleBar.inactiveBackground": "",
"titleBar.inactiveForeground": "",
"titleBar.border": "",
// Notification Colors — Notification toasts slide up from the bottom-right of the workbench.
"notificationCenter.border": "",
"notificationCenterHeader.foreground": "",
"notificationCenterHeader.background": "",
"notificationToast.border": "",
"notifications.foreground": "",
"notifications.background": "",
"notifications.border": "",
"notificationLink.foreground": "",
// Extensions
"extensionButton.prominentForeground": "",
"extensionButton.prominentBackground": "",
"extensionButton.prominentHoverBackground": "",
"pickerGroup.border": "",
"pickerGroup.foreground": "",
// Integrated Terminal Colors
"terminal.background": "",
"terminal.foreground": "",
"terminal.ansiBlack": "",
"terminal.ansiBlue": "",
"terminal.ansiBrightBlack": "",
"terminal.ansiBrightBlue": "",
"terminal.ansiBrightCyan": "",
"terminal.ansiBrightGreen": "",
"terminal.ansiBrightMagenta": "",
"terminal.ansiBrightRed": "",
"terminal.ansiBrightWhite": "",
"terminal.ansiBrightYellow": "",
"terminal.ansiCyan": "",
"terminal.ansiGreen": "",
"terminal.ansiMagenta": "",
"terminal.ansiRed": "",
"terminal.ansiWhite": "",
"terminal.ansiYellow": "",
"terminal.selectionBackground": "",
"terminalCursor.background": "",
"terminalCursor.foreground": "",
// Debug
"debugToolBar.background": "",
// Welcome Page
"welcomePage.buttonBackground": "",
"welcomePage.buttonHoverBackground": "",
"walkThrough.embeddedEditorBackground": "",
// Git Colors
"gitDecoration.modifiedResourceForeground": "",
"gitDecoration.deletedResourceForeground": "",
"gitDecoration.untrackedResourceForeground": "",
"gitDecoration.ignoredResourceForeground": "",
"gitDecoration.conflictingResourceForeground": ""
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment