Skip to content

VSCode Workbench Colors

Description

VSCode Color Customization Ref

"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": "#111",
    "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": ""
}

Comments