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.json

"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": ""
}

Thanks! worldHighlightStrongBackground should be replaced with wordHighlightStrongBackground (that's what actually works in a latest VSCode).

@certainlyakey

NOTE:
I've already googled (3 days) and can't find info about a few features.

---

I don't understand how it works? Maybe it works with some kind of extension?
If you can please provide 🎬 screencast or 🖼️ screenshot.

---

ℹ️ Features for which clarification is needed:

📑 Base colors:

descriptionForeground

📑 Text Colors:

textBlockQuote.border
textCodeBlock.background
textPreformat.foreground

📑 Input control:

inputValidation.errorBackground
inputValidation.errorForeground
inputValidation.infoBackground
inputValidation.infoForeground
inputValidation.infoBorder
inputValidation.warningBackground
inputValidation.warningForeground
inputValidation.warningBorder

📑 Lists and trees:

list.inactiveFocusBackground

📑 Activity Bar:

sideBar.dropBackground

📑 MiniMap:

minimapGutter.addedBackground
minimapGutter.modifiedBackground
minimapGutter.deletedBackground

📑 Editor Groups & Tabs:

tab.activeModifiedBorder
tab.inactiveModifiedBorder
tab.unfocusedActiveModifiedBorder
tab.unfocusedInactiveModifiedBorder
editorPane.background

📑 Editor colors:

editorCursor.background
editor.findRangeHighlightBackground
editor.findRangeHighlightBorder
searchEditor.findMatchBackground
searchEditor.findMatchBorder
editor.symbolHighlightBackground
editor.symbolHighlightBorder

📑 Overview ruler:

editorOverviewRuler.rangeHighlightForeground
editorOverviewRuler.selectionHighlightForeground
editorOverviewRuler.wordHighlightForeground
editorOverviewRuler.wordHighlightStrongForeground
editorOverviewRuler.modifiedForeground
editorOverviewRuler.addedForeground
editorOverviewRuler.deletedForeground
editorOverviewRuler.errorForeground
editorOverviewRuler.warningForeground
editorOverviewRuler.infoForeground
editorOverviewRuler.bracketMatchForeground

📑 Errors and warnings:

editorWarning.foreground
editorWarning.border
editorHint.foreground
editorHint.border
problemsWarningIcon.foreground

📑 The gutter contains the glyph margins and the line numbers:

editorGutter.commentRangeForeground

📑 Editor widget colors:

editorMarkerNavigation.background
editorMarkerNavigationError.background
editorMarkerNavigationWarning.background
editorMarkerNavigationInfo.background

📑 Panel colors:

panel.dropBackground
panelInput.border

📑 Status Bar colors:

statusBar.noFolderBackground
statusBar.noFolderBorder

googled it would be something like this:

...but unfortunately, I haven't ☹️

📑 Notification colors:

notificationLink.foreground

📑 Debug:

editor.stackFrameHighlightBackground
editor.focusedStackFrameHighlightBackground

I think it's about - Debug > CALL STACK
...but don't know the idea where are these features disappear? 😯

📑 Welcome page:

walkThrough.embeddedEditorBackground

📑 Settings Editor colors:

settings.dropdownListBorder

📑 Snippets:

editor.snippetFinalTabstopHighlightBackground
editor.snippetFinalTabstopHighlightBorder

---

ℹ️ System:
Microsoft Windows 10 Enterprise 2016 LTSB, 64x
Version: 10.0.14393.2273 (Win10 RS1)
«VS Code» is last updated.

---

Best regards❗ ✌️

What are the names of valid colors? Hardest thing in the world to find. Just a list...

Hi, @lol-russo
I want to customize the background color and get rid the dashed underline of unused variables. Do you know how?
I'm using Gruvbox Material Dark Theme.