Visual Studio Code Color Theme Guide

based on VSCode 1.46.1
OS: mac Win both LANG: En Ja
Donate Forum

Latest Change Log

06-23-2020

  • added: editor.hoverHighlightBackground-editor.symbolHighlightBackground

Contrast colors

contrastActiveBorder

contrastActiveBorder Screenshot
  1. Focus on a text box or list item, or select a word.
  • For high contrast themes. Only applicable when "type": "hc-black" in name-color-theme.json. However, if you add it to the workbench.colorCustomizations section of settings.json, it will be applied to any theme.

contrastBorder

contrastBorder Screenshot
  • Borders for windows, buttons, badges, etc.
  • For high contrast themes. Only applicable when "type": "hc-black" in name-color-theme.json. However, if you add it to the workbench.colorCustomizations section of settings.json, it will be applied to any theme.

Base colors

focusBorder

focusBorder Screenshot
  1. Focus on text boxes, lists, etc.
  • Depending on the location, the border color changes only when you click.

foreground

foreground Screenshot
  • Icons on the right of the tab bar, some characters and icons in the panel, etc.

widget.shadow

widget.shadow Screenshot
  1. Shadows for Find(⌘ + F / Ctrl + F), Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P), etc.

selection.background

selection.background Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Type test in "Find".
  3. Select the text.

descriptionForeground

descriptionForeground Screenshot
  1. Display Welcome(Help> Welcome).

errorForeground

errorForeground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Search for strings that do not hit.

icon.foreground

icon.foreground Screenshot
  1. Find(⌘ + F / Ctrl + F) icon and Editor Gutter icon.

Window border

window.activeBorder

window.activeBorder Screenshot
  1. Activate the Visual Studio Code window.
  • window.inactiveBorder If is not specified, all window frames will have this color.

window.inactiveBorder

window.inactiveBorder Screenshot
  1. Deactivate the Visual Studio Code window.

Text colors

textBlockQuote.background

textBlockQuote.background Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type Java Test Runner ↩︎ in "Search Extensions in Marketplace".
  3. Select "Java Test Runner" from the list.

textBlockQuote.border

textBlockQuote.border Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type Java Test Runner ↩︎ in "Search Extensions in Marketplace".
  3. Select "Java Test Runner" from the list.

textCodeBlock.background

textCodeBlock.background Screenshot
  1. New File(⌘ + N / ctrl + N).
  2. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  3. Type HTML ↩︎ in "Select Language Mode".
  4. Type ! Tab in Editor.
  5. Mouse over the "charset" in <meta charset="....

textLink.activeForeground

textLink.activeForeground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type Debugger for Microsoft Edge ↩︎ in "Search Extensions in Marketplace".
  3. Select "Debugger for Microsoft Edge" from the list.
  4. Hover your mouse cursor over "1. Install the extension." in the "Getting Started" section.

textLink.foreground

textLink.foreground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type Debugger for Microsoft Edge ↩︎ in "Search Extensions in Marketplace".
  3. Select "Debugger for Microsoft Edge" from the list.

textPreformat.foreground

textPreformat.foreground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type Debugger for Microsoft Edge ↩︎ in "Search Extensions in Marketplace".
  3. Select "Debugger for Microsoft Edge" from the list.

textSeparator.foreground

  • Unknown.

Button control

button.background

button.background Screenshot
  1. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).

button.foreground

button.foreground Screenshot
  1. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).

button.hoverBackground

button.hoverBackground Screenshot
  1. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  2. Mouse over the "Open Folder" button.

checkbox.background

checkbox.background Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  • The "Settings" checkbox is overwritten by settings.checkboxBackground.

checkbox.foreground

checkbox.foreground Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  • The "Settings" checkbox is overwritten by settings.checkboxBackground.

checkbox.border

checkbox.border Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  • The "Settings" checkbox is overwritten by settings.checkboxBackground.

Input control

input.background

input.background Screenshot
  1. Display Find(⌘ + F / Ctrl + F).

input.border

input.border Screenshot
  1. Display Find(⌘ + F / Ctrl + F).

input.foreground

input.foreground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Type test in "Find".

input.placeholderForeground

input.placeholderForeground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  • Leave the text box empty.

inputOption.activeBackground

inputOption.activeBackground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Enable Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R).

inputOption.activeForeground

inputOption.activeForeground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Enable Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R).

inputOption.activeBorder

inputOption.activeBorder Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Enable Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R).

inputValidation.errorBackground

inputValidation.errorBackground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Enable Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R).
  3. Type \ in "Find".

inputValidation.errorForeground

inputValidation.errorForeground Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Enable Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R).
  3. Type \ in "Find".

inputValidation.errorBorder

inputValidation.errorBorder Screenshot
  1. Display Find(⌘ + F / Ctrl + F).
  2. Enable Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R).
  3. Type \ in "Find".

inputValidation.infoBackground

  • Unknown.

inputValidation.infoForeground

  • Unknown.

inputValidation.infoBorder

  • Unknown.

inputValidation.warningBackground

inputValidation.warningBackground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Display Source Control(⌃ + ⇧ + G / Ctrl + Shift + G).
  5. Click the "Initialize Repository" button.
  6. Type test test test test test test test test test test test in "Message" of "Source Control" (do not press ↩︎).

inputValidation.warningForeground

inputValidation.warningForeground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Display Source Control(⌃ + ⇧ + G / Ctrl + Shift + G).
  5. Click the "Initialize Repository" button.
  6. Type test test test test test test test test test test test in "Message" of "Source Control" (do not press ↩︎).

inputValidation.warningBorder

inputValidation.warningBorder Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Display Source Control(⌃ + ⇧ + G / Ctrl + Shift + G).
  5. Click the "Initialize Repository" button.
  6. Type test test test test test test test test test test test in "Message" of "Source Control" (do not press ↩︎).

Scrollbar control

scrollbar.shadow

scrollbar.shadow Screenshot
  1. Press ↩︎ until the scroll bar appears.
  2. Scroll.

scrollbarSlider.activeBackground

scrollbarSlider.activeBackground Screenshot
  1. Drag the scroll bar slider.

scrollbarSlider.background

scrollbarSlider.activeBackground Screenshot
  • Scrollbar color.

scrollbarSlider.hoverBackground

scrollbarSlider.hoverBackground Screenshot
  1. Mouse over the scroll bar slider.

Badge

badge.foreground

badge.foreground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).

badge.background

badge.background Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).

Progress bar

progressBar.background

progressBar.background Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type test in "Search Extensions in Marketplace".
  • A progress bar for a short time of about a second is displayed above "Message".

Lists and trees

list.activeSelectionBackground

list.activeSelectionBackground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Select the item in the "Extensions" list.

list.activeSelectionForeground

list.activeSelectionForeground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Select the item in the "Extensions" list.

list.dropBackground

list.dropBackground Screenshot
  1. Create a test folder on desktop.
  2. Create a test2 folder in the test folder.
  3. Return to Visual Studio Code.
  4. Open the test folder by pressing ⌘ + O / Ctrl + O.
  5. New File(⌘ + N / ctrl + N).
  6. Save(⌘ + S / Ctrl + S) as "test.txt".
  7. Drag the saved file onto the test2 folder (hold down the mouse button).

list.focusBackground

list.focusBackground Screenshot
  1. Display Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P).

list.focusForeground

list.focusForeground Screenshot
  1. Display Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P).

list.highlightForeground

list.highlightForeground Screenshot
  1. Display Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P).
  2. Type git after ">" (do not press ↩︎).

list.hoverBackground

list.hoverBackground Screenshot
  1. Display Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P).
  2. Mouse over other than active item.

list.hoverForeground

list.hoverForeground Screenshot
  1. Display Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P).
  2. Mouse over other than active item.

list.inactiveSelectionBackground

list.hoverForeground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Select the item in the "Extensions" list.
  3. Click anywhere outside the list.

list.inactiveSelectionForeground

list.inactiveSelectionForeground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Select the item in the "Extensions" list.
  3. Click anywhere outside the list.

list.inactiveFocusBackground

list.inactiveSelectionForeground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Select the first item in the "Extensions" list.
  3. Press .
  4. Click anywhere outside the list.

list.invalidItemForeground

list.invalidItemForeground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Select File> Save Workspace As...
  5. Save as test.code-workspace.
  6. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  7. Open test.code-workspace.
  8. Change "path": "." to "path": "test".
  9. Save(⌘ + S / Ctrl + S).
  • If the color of the test folder in Explorer does not change this way, click the test folder once and then remove the focus.

list.errorForeground

list.errorForeground Screenshot
  1. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  2. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  3. Type JavaScript ↩︎ in "Select Language Mode".
  4. Type function() in Editor.

list.warningForeground

list.warningForeground Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type HTMLHint in "Search Extensions in Marketplace".
  3. Click "Install" button of "HTMLHint".
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  6. Type HTML ↩︎ in "Select Language Mode".
  7. Type test in Editor.
  8. Save(⌘ + S / Ctrl + S) as test.html.

listFilterWidget.background

listFilterWidget.background Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type HTML ↩︎ in "Select Language Mode".
  3. Type ! Tab in Editor.
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Open the "Outline" view.
  6. Click anywhere in the "Outline" view to activate the list.
  7. Type meta.

listFilterWidget.outline

listFilterWidget.outline Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type HTML ↩︎ in "Select Language Mode".
  3. Type ! Tab in Editor.
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Open the "Outline" view.
  6. Click anywhere in the "Outline" view to activate the list.
  7. Type meta.

listFilterWidget.noMatchesOutline

listFilterWidget.noMatchesOutline Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type HTML ↩︎ in "Select Language Mode".
  3. Type ! Tab in Editor.
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Open the "Outline" view.
  6. Click anywhere in the "Outline" view to activate the list.
  7. Type h1.

list.filterMatchBackground

list.filterMatchBackground Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type HTML ↩︎ in "Select Language Mode".
  3. Type ! Tab in Editor.
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Open the "Outline" view.
  6. Click anywhere in the "Outline" view to activate the list.
  7. Type meta.

list.filterMatchBorder

list.filterMatchBorder Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type HTML ↩︎ in "Select Language Mode".
  3. Type ! Tab in Editor.
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Open the "Outline" view.
  6. Click anywhere in the "Outline" view to activate the list.
  7. Type meta.

tree.indentGuidesStroke

tree.indentGuidesStroke Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type HTML ↩︎ in "Select Language Mode".
  3. Type ! Tab in Editor.
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Open the "Outline" view.
  6. Mouse over the "Outline" view.

list.deemphasizedForeground

list.deemphasizedForeground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  4. Type Debugger for Chrome in "Search Extensions in Marketplace".
  5. Press "Install" button of "Debugger for Chrome".
  6. Open the test folder by pressing ⌘ + O / Ctrl + O.
  7. Display Run(⇧ + ⌘ + D / Ctrl + Shift + D).
  8. Click the "launch.json file" link.
  9. Select "Chrome".
  10. Change "url": "http://localhost:8080", to "file": "${workspaceRoot}/test.html", and save(⌘ + S / Ctrl + S).
  11. New File(⌘ + N / ctrl + N).
  12. Enter the following code in the Editor.
    <!DOCTYPE html>
    <script src="test.js"></script>
  13. Save(⌘ + S / Ctrl + S) as test.html.
  14. New File(⌘ + N / ctrl + N).
  15. Type alert('test'); in Editor.
  16. Save(⌘ + S / Ctrl + S) as test.js.
  17. When you move the mouse cursor to the blank part on the left side of the line number, a dot is displayed. Click it.
  18. Click the right-pointing triangle icon at the top of the "Run" panel.
  19. Open "Call Stack" view in the "Run" panel.
  20. Unfocus from "Call Stack" view.
  • Google Chrome is installed.

Activity Bar

activityBar.background

activityBar.background Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).

activityBar.dropBackground

  • removed in 1.46.0.

activityBar.dropBorder

activityBar.foreground Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Drag the Explorer icon in the activity bar.

activityBar.foreground

activityBar.foreground Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).

activityBar.inactiveForeground

activityBar.inactiveForeground Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).

activityBar.border

activityBar.border Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).

activityBarBadge.background

activityBarBadge.background Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Press ↩︎.

activityBarBadge.foreground

activityBarBadge.foreground Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Press ↩︎.

activityBar.activeBorder

activityBarBadge.foreground Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Press ↩︎.

activityBar.activeBackground

activityBar.activeBackground Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).

activityBar.activeFocusBorder

activityBar.activeFocusBorder Screenshot
  1. Select View >Appearance >Show Activity Bar (if the activity bar is not visible).
  2. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  3. Click the Explorer icon in Activity Bar.

Minimap

minimap.findMatchHighlight

minimap.findMatchHighlight Screenshot
  1. Type test ↩︎ in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".

minimap.selectionHighlight

minimap.selectionHighlight Screenshot
  1. Type test in Editor.
  2. Press ⌘ + A / Ctrl + A to select text.

minimap.errorHighlight

minimap.errorHighlight Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Type function() ↩︎ in Editor.

minimap.warningHighlight

minimap.warningHighlight Screenshot
  1. Show Extensions(⇧ + ⌘ + X / Ctrl + Shift + X).
  2. Type HTMLHint in "Search Extensions in Marketplace".
  3. Click "Install" button of "HTMLHint".
  4. Show Explorer(⇧ + ⌘ + E / Ctrl + Shift + E).
  5. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  6. Type HTML ↩︎ in "Select Language Mode".
  7. Type test in Editor.
  8. Save(⌘ + S / Ctrl + S) as test.html.

minimap.background

minimap.background Screenshot
  1. Select View> Show Minimap (if the minimap is not visible).

minimapSlider.background

minimapSlider.background Screenshot
  1. Select View> Show Minimap (if the minimap is not visible).
  2. Hold ↩︎ until scroll.

minimapSlider.hoverBackground

minimapSlider.hoverBackground Screenshot
  1. Select View> Show Minimap (if the minimap is not visible).
  2. Hold ↩︎ until scroll.
  3. Mouse over the slider of Minimap.

minimapSlider.activeBackground

minimapSlider.activeBackground Screenshot
  1. Select View> Show Minimap (if the minimap is not visible).
  2. Hold ↩︎ until scroll.
  3. Drag the Minimap slider.

minimapGutter.addedBackground

minimapGutter.addedBackground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Display Source Control(⌃ + ⇧ + G / Ctrl + Shift + G).
  5. Click the "Initialize Repository" button.
  6. New File(⌘ + N / ctrl + N).
  7. Type test in Editor.
  8. Save(⌘ + S / Ctrl + S) as test.txt.
  9. Type test ↩︎ in "Message" of "Source Control: Git".
  10. The dialog "There are no staged changes to commit." is displayed. Click the "Yes" button.
  11. Return to the editor and move the cursor to the test line.
  12. Press ↩︎.

minimapGutter.modifiedBackground

minimapGutter.modifiedBackground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Display Source Control(⌃ + ⇧ + G / Ctrl + Shift + G).
  5. Click the "Initialize Repository" button.
  6. New File(⌘ + N / ctrl + N).
  7. Type test in Editor.
  8. Save(⌘ + S / Ctrl + S) as test.txt.
  9. Type test ↩︎ in "Message" of "Source Control: Git".
  10. The dialog "There are no staged changes to commit." is displayed. Click the "Yes" button.
  11. Return to the Editor and type 2 in the line test.

minimapGutter.deletedBackground

minimapGutter.deletedBackground Screenshot
  1. Create a test folder on desktop.
  2. Return to Visual Studio Code.
  3. Open the test folder by pressing ⌘ + O / Ctrl + O.
  4. Display Source Control(⌃ + ⇧ + G / Ctrl + Shift + G).
  5. Click the "Initialize Repository" button.
  6. New File(⌘ + N / ctrl + N).
  7. Enter the following code in the Editor.
    test
    test2
  8. Save(⌘ + S / Ctrl + S) as test.txt.
  9. Type test ↩︎ in "Message" of "Source Control: Git".
  10. The dialog "There are no staged changes to commit." is displayed. Click the "Yes" button.
  11. Return to the editor and move the cursor to the test line.
  12. Press ⇧ + ⌘ + K / Ctrl + Shift + K to Delete line.

Editor Groups & Tabs

editorGroup.border

editorGroup.border Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).

editorGroup.dropBackground

editorGroup.dropBackground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).
  2. Drag the tab of the divided Editor and overlay it on the other Editor.

editorGroupHeader.noTabsBackground

editorGroupHeader.noTabsBackground Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  2. Type workbench.editor.showTabs ↩︎ in "Search settings".
  3. Uncheck "Workbench >Editor: Show Tabs".

editorGroupHeader.tabsBackground

editorGroupHeader.tabsBackground Screenshot
  • The background of the tab container.

editorGroupHeader.tabsBorder

editorGroupHeader.tabsBorder Screenshot
  1. Save(⌘ + S / Ctrl + S) as test.txt.
  • Only when Breadcrumbs are displayed.

editorGroupHeader.border

editorGroupHeader.border Screenshot
  1. Save(⌘ + S / Ctrl + S) as test.txt.
  • When Breadcrumbs is not displayed, it becomes the border of the tab container.

editorGroup.emptyBackground

editorGroup.emptyBackground Screenshot
  1. Select View> Editor Layout> Two Columns.
  2. Click the editor on the right.

editorGroup.focusedEmptyBorder

editorGroup.focusedEmptyBorder Screenshot
  1. Select View> Editor Layout> Two Columns.
  2. Click the editor on the right.

tab.activeBackground

tab.activeBackground Screenshot
  • The background color of the active tab.

tab.unfocusedActiveBackground

tab.unfocusedActiveBackground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).

tab.activeForeground

tab.activeForeground Screenshot
  • The foreground color of the active tab.

tab.border

tab.border Screenshot
  • Tab border.

tab.activeBorder

tab.activeBorder Screenshot
  • The border of the active tab.

tab.unfocusedActiveBorder

tab.unfocusedActiveBorder Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).

tab.activeBorderTop

tab.activeBorderTop Screenshot
  • The border of the active tab.

tab.unfocusedActiveBorderTop

tab.unfocusedActiveBorderTop Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).

tab.inactiveBackground

tab.inactiveBackground Screenshot
  1. New File(⌘ + N / ctrl + N).

tab.unfocusedInactiveBackground

tab.unfocusedInactiveBackground Screenshot
  1. New File(⌘ + N / ctrl + N).
  2. Split Editor Right(⌘ + \ / Ctrl + \).

tab.inactiveForeground

tab.inactiveForeground Screenshot
  1. New File(⌘ + N / ctrl + N).

tab.unfocusedActiveForeground

tab.unfocusedActiveForeground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).

tab.unfocusedInactiveForeground

tab.unfocusedInactiveForeground Screenshot
  1. New File(⌘ + N / ctrl + N).
  2. Split Editor Right(⌘ + \ / Ctrl + \).

tab.hoverBackground

tab.hoverBackground Screenshot
  1. Mouse over the tab.

tab.unfocusedHoverBackground

tab.unfocusedHoverBackground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).
  2. Mouse over the tab of the Editor that is not in focus.
  • tab.hoverBackground If is not specified, the tab with focus will also be this color.

tab.hoverForeground

tab.hoverForeground Screenshot
  1. Mouse over the tab.

tab.unfocusedHoverForeground

tab.unfocusedHoverForeground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \).
  2. Mouse over the tab of the Editor that is not in focus.
  • tab.hoverForeground If is not specified, the tab with focus will also be this color.

tab.hoverBorder

  • Unknown.

tab.unfocusedHoverBorder

  • Unknown.

tab.activeModifiedBorder

tab.activeModifiedBorder Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  2. Type workbench.editor.highlightModifiedTabs ↩︎ in "Search settings".
  3. Check "Workbench >Editor: Highlight Modified Tabs".
  4. Type some text in the editor.

tab.inactiveModifiedBorder

tab.inactiveModifiedBorder Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  2. Type workbench.editor.highlightModifiedTabs ↩︎ in "Search settings".
  3. Check "Workbench >Editor: Highlight Modified Tabs".
  4. Type some text in the editor.
  5. New File(⌘ + N / ctrl + N).

tab.unfocusedActiveModifiedBorder

tab.unfocusedActiveModifiedBorder Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  2. Type workbench.editor.highlightModifiedTabs ↩︎ in "Search settings".
  3. Check "Workbench >Editor: Highlight Modified Tabs".
  4. Type some text in the editor.
  5. Split Editor Right(⌘ + \ / Ctrl + \).

tab.unfocusedInactiveModifiedBorder

tab.unfocusedInactiveModifiedBorder Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  2. Type workbench.editor.highlightModifiedTabs ↩︎ in "Search settings".
  3. Check "Workbench >Editor: Highlight Modified Tabs".
  4. Type some text in the editor.
  5. New File(⌘ + N / ctrl + N).
  6. Split Editor Right(⌘ + \ / Ctrl + \).

editorPane.background

editorPane.background Screenshot
  1. Display Zen Mode(⌘ + K, Z / Ctrl + K, Z).

Editor colors

editor.background

editor.background Screenshot
  • Background color of the Editor.

editor.foreground

editor.foreground Screenshot
  • The foreground color of the Editor.

editorLineNumber.foreground

editorLineNumber.foreground Screenshot
  1. Press ↩︎.

editorLineNumber.activeForeground

editorLineNumber.activeForeground Screenshot
  • Current line number color.

editorCursor.background

editorCursor.background Screenshot
  1. Display Settings(⌘ + , / Ctrl + ,).
  2. Type editor.cursorStyles ↩︎ in "Search settings".
  3. Select "Block" in "Editor: Cursor Style".
  4. Type some text in the editor.
  5. Move the cursor to the text.
  • It is not the cursor that changes, but the color of the text under the cursor.

editorCursor.foreground

editorCursor.foreground Screenshot
  • The color of the cursor.

editor.selectionBackground

editor.selectionBackground Screenshot
  1. Type some text in the editor.
  2. Press ⌘ + A / Ctrl + A to select text.

editor.selectionForeground

editor.selectionForeground Screenshot
  1. Type some text in the editor.
  2. Press ⌘ + A / Ctrl + A to select text.
  • For high contrast themes. Only applicable when "type": "hc-black" in name-color-theme.json.

editor.inactiveSelectionBackground

editor.inactiveSelectionBackground Screenshot
  1. Type some text in the editor.
  2. Press ⌘ + A / Ctrl + A to select text.
  3. Split Editor Right(⌘ + \ / Ctrl + \).

editor.selectionHighlightBackground

editor.selectionHighlightBackground Screenshot
  1. Type test test in Editor.
  2. Press ⇧ + ⌥ + ← / Ctrl + Shift + ← to select the last test.

editor.selectionHighlightBorder

editor.selectionHighlightBorder Screenshot
  1. Type test test in Editor.
  2. Press ⇧ + ⌥ + ← / Ctrl + Shift + ← to select the last test.

editor.wordHighlightBackground

editor.wordHighlightBackground Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Type 'test' in Editor.
  4. Place the cursor between test.

editor.wordHighlightBorder

editor.wordHighlightBorder Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Type 'test' in Editor.
  4. Place the cursor between test.

editor.wordHighlightStrongBackground

editor.wordHighlightStrongBackground Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Type let test = in Editor.
  4. Place the cursor between test.

editor.wordHighlightStrongBorder

editor.wordHighlightStrongBorder Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Type let test = in Editor.
  4. Place the cursor between test.

editor.findMatchBackground

editor.findMatchBackground Screenshot
  1. Type test test in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".
  4. Press ⇧ + ⌘ + G / Shift + F3 to focus on search results.

editor.findMatchHighlightBackground

editor.findMatchHighlightBackground Screenshot
  1. Type test in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".

editor.findRangeHighlightBackground

editor.findRangeHighlightBackground Screenshot
  1. Type test in Editor.
  2. Press ⌘ + A / Ctrl + A to select text.
  3. Display Find(⌘ + F / Ctrl + F).
  4. Enable Find in selection(⌥ + ⌘ + L / Alt + L).

editor.findMatchBorder

editor.findMatchBorder Screenshot
  1. Type test test in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".
  4. Press ⇧ + ⌘ + G / Shift + F3 to focus on search results.

editor.findMatchHighlightBorder

editor.findMatchHighlightBorder Screenshot
  1. Type test in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".

editor.findRangeHighlightBorder

editor.findRangeHighlightBorder Screenshot
  1. Type test in Editor.
  2. Press ⌘ + A / Ctrl + A to select text.
  3. Display Find(⌘ + F / Ctrl + F).
  4. Enable Find in selection(⌥ + ⌘ + L / Alt + L).

searchEditor.findMatchBackground

searchEditor.findMatchBackground Screenshot
  1. Type test in Editor.
  2. Display Search(⇧ + ⌘ + F / Ctrl + Shift + F).
  3. Type test in "Search".
  4. ⌘ + ↩︎ / Ctrl + ↩︎ To display the Search Editor.

searchEditor.findMatchBorder

searchEditor.findMatchBorder Screenshot
  1. Type test in Editor.
  2. Display Search(⇧ + ⌘ + F / Ctrl + Shift + F).
  3. Type test in "Search".
  4. ⌘ + ↩︎ / Ctrl + ↩︎ To display the Search Editor.

searchEditor.textInputBorder

searchEditor.textInputBorder Screenshot
  1. Display Command Palette(⇧ + ⌘ + P / Ctrl + Shift + P).
  2. Select "Search Editor: Open new Search Editor".
  3. Press Tab to unfocus from the Search Editor text input form.

editor.hoverHighlightBackground

editor.hoverHighlightBackground Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Type test in Editor.
  4. Mouse over test.

editor.lineHighlightBackground

editor.lineHighlightBackground Screenshot
  1. Press ↩︎.

editor.lineHighlightBorder

editor.lineHighlightBorder Screenshot
  1. Press ↩︎.

editorLink.activeForeground

editorLink.activeForeground Screenshot
  1. Type https://code.visualstudio.com in Editor.
  2. Hold / Ctrl and mouse over "https://code.visualstudio.com".

editor.rangeHighlightBackground

editor.rangeHighlightBackground Screenshot
  1. Type test test in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".
  4. Press ⇧ + ⌘ + G / Shift + F3 to focus on search results.

editor.rangeHighlightBorder

editor.rangeHighlightBorder Screenshot
  1. Type test test in Editor.
  2. Display Find(⌘ + F / Ctrl + F).
  3. Type test in "Find".
  4. Press ⇧ + ⌘ + G / Shift + F3 to focus on search results.

editor.symbolHighlightBackground

editor.symbolHighlightBackground Screenshot
  1. Displays Select Language Mode(⌘ + K, M / Ctrl + K, M).
  2. Type JavaScript ↩︎ in "Select Language Mode".
  3. Enter the following code in the Editor.
    let test
    test
  4. Hold / Ctrl and click test.

editor.symbolHighlightBorder

editorWhitespace.foreground

editorIndentGuide.background

editorIndentGuide.activeBackground

editorRuler.foreground

editorCodeLens.foreground

editorLightBulb.foreground

editorLightBulbAutoFix.foreground

editorBracketMatch.background

editorBracketMatch.border

editor.foldBackground

editorOverviewRuler.background

editorOverviewRuler.border

editorOverviewRuler.findMatchForeground

editorOverviewRuler.rangeHighlightForeground

editorOverviewRuler.selectionHighlightForeground

editorOverviewRuler.wordHighlightForeground

editorOverviewRuler.wordHighlightStrongForeground

editorOverviewRuler.modifiedForeground

editorOverviewRuler.addedForeground

editorOverviewRuler.deletedForeground

editorOverviewRuler.errorForeground

editorOverviewRuler.warningForeground

editorOverviewRuler.infoForeground

editorOverviewRuler.bracketMatchForeground

editorError.foreground

editorError.border

editorWarning.foreground

editorWarning.border

editorInfo.foreground

editorInfo.border

editorHint.foreground

editorHint.border

problemsErrorIcon.foreground

problemsWarningIcon.foreground

problemsInfoIcon.foreground

editorUnnecessaryCode.border

editorUnnecessaryCode.opacity

editorGutter.background

editorGutter.modifiedBackground

editorGutter.addedBackground

editorGutter.deletedBackground

editorGutter.commentRangeForeground

editorGutter.foldingControlForeground

Diff editor colors

diffEditor.insertedTextBackground

diffEditor.insertedTextBorder

diffEditor.removedTextBackground

diffEditor.removedTextBorder

diffEditor.border

diffEditor.diagonalFill

Editor widget colors

editorWidget.foreground

editorWidget.background

editorWidget.border

editorWidget.resizeBorder

editorSuggestWidget.background

editorSuggestWidget.border

editorSuggestWidget.foreground

editorSuggestWidget.highlightForeground

editorSuggestWidget.selectedBackground

editorHoverWidget.foreground

editorHoverWidget.background

editorHoverWidget.border

editorHoverWidget.statusBarBackground

debugExceptionWidget.background

debugExceptionWidget.border

editorMarkerNavigation.background

editorMarkerNavigationError.background

editorMarkerNavigationWarning.background

editorMarkerNavigationInfo.background

Peek view colors

peekView.border

peekViewEditor.background

peekViewEditorGutter.background

peekViewEditor.matchHighlightBackground

peekViewEditor.matchHighlightBorder

peekViewResult.background

peekViewResult.fileForeground

peekViewResult.lineForeground

peekViewResult.matchHighlightBackground

peekViewResult.selectionBackground

peekViewResult.selectionForeground

peekViewTitle.background

peekViewTitleDescription.foreground

peekViewTitleLabel.foreground

Merge conflicts

merge.currentHeaderBackground

merge.currentContentBackground

merge.incomingHeaderBackground

merge.incomingContentBackground

merge.border

merge.commonContentBackground

merge.commonHeaderBackground

editorOverviewRuler.currentContentForeground

editorOverviewRuler.incomingContentForeground

editorOverviewRuler.commonContentForeground

Panel colors

panel.background

panel.border

panel.dropBackground

  • removed in 1.46.0.

panel.dropBorder

  • Under investigation (1.46.0 or later).

panelTitle.activeBorder

panelTitle.activeForeground

panelTitle.inactiveForeground

panelInput.border

imagePreview.border

Status Bar colors

statusBar.background

statusBar.foreground

statusBar.border

statusBar.debuggingBackground

statusBar.debuggingForeground

statusBar.debuggingBorder

statusBar.noFolderForeground

statusBar.noFolderBackground

statusBar.noFolderBorder

statusBarItem.activeBackground

statusBarItem.hoverBackground

statusBarItem.prominentForeground

statusBarItem.prominentBackground

statusBarItem.prominentHoverBackground

statusBarItem.remoteBackground

statusBarItem.remoteForeground

Title Bar colors

titleBar.activeBackground

titleBar.activeForeground

titleBar.inactiveBackground

titleBar.inactiveForeground

titleBar.border

Notification colors

notificationCenter.border

notificationCenterHeader.foreground

notificationCenterHeader.background

notificationToast.border

notifications.foreground

notifications.background

notifications.border

notificationLink.foreground

notificationsWarningIcon.foreground

notificationsInfoIcon.foreground

Extensions

extensionButton.prominentForeground

extensionButton.prominentBackground

extensionButton.prominentHoverBackground

extensionBadge.remoteBackground

extensionBadge.remoteForeground

Quick picker

pickerGroup.border

pickerGroup.foreground

quickInput.background

quickInput.foreground

quickInputTitle.background

Integrated Terminal colors

terminal.background

terminal.border

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

debugToolBar.border

editor.stackFrameHighlightBackground

editor.focusedStackFrameHighlightBackground

debugView.exceptionLabelForeground

debugView.exceptionLabelBackground

debugView.stateLabelForeground

debugView.stateLabelBackground

debugView.valueChangedHighlight

debugTokenExpression.name

debugTokenExpression.value

debugTokenExpression.string

debugTokenExpression.boolean

debugTokenExpression.number

debugTokenExpression.error

Welcome page

welcomePage.background

welcomePage.buttonBackground

welcomePage.buttonHoverBackground

walkThrough.embeddedEditorBackground

Git colors

gitDecoration.addedResourceForeground

gitDecoration.modifiedResourceForeground

gitDecoration.deletedResourceForeground

gitDecoration.untrackedResourceForeground

gitDecoration.ignoredResourceForeground

gitDecoration.conflictingResourceForeground

gitDecoration.submoduleResourceForeground

Settings Editor colors

settings.headerForeground

settings.modifiedItemIndicator

settings.dropdownBackground

settings.dropdownForeground

settings.dropdownBorder

settings.dropdownListBorder

settings.checkboxBackground

settings.checkboxForeground

settings.checkboxBorder

settings.textInputBackground

settings.textInputForeground

settings.textInputBorder

settings.numberInputBackground

settings.numberInputForeground

settings.numberInputBorder

Snippets

editor.snippetTabstopHighlightBackground

editor.snippetTabstopHighlightBorder

editor.snippetFinalTabstopHighlightBackground

editor.snippetFinalTabstopHighlightBorder

Symbol Icons

symbolIcon.arrayForeground

symbolIcon.booleanForeground

symbolIcon.classForeground

symbolIcon.colorForeground

symbolIcon.constantForeground

symbolIcon.constructorForeground

symbolIcon.enumeratorForeground

symbolIcon.enumeratorMemberForeground

symbolIcon.eventForeground

symbolIcon.fieldForeground

symbolIcon.fileForeground

symbolIcon.folderForeground

symbolIcon.functionForeground

symbolIcon.interfaceForeground

symbolIcon.keyForeground

symbolIcon.keywordForeground

symbolIcon.methodForeground

symbolIcon.moduleForeground

symbolIcon.namespaceForeground

symbolIcon.nullForeground

symbolIcon.numberForeground

symbolIcon.objectForeground

symbolIcon.operatorForeground

symbolIcon.packageForeground

symbolIcon.propertyForeground

symbolIcon.referenceForeground

symbolIcon.snippetForeground

symbolIcon.stringForeground

symbolIcon.structForeground

symbolIcon.textForeground

symbolIcon.typeParameterForeground

symbolIcon.unitForeground

symbolIcon.variableForeground

Debug Icons

debugIcon.breakpointForeground

debugIcon.breakpointDisabledForeground

debugIcon.breakpointUnverifiedForeground

debugIcon.breakpointCurrentStackframeForeground

debugIcon.breakpointStackframeForeground

debugIcon.startForeground

debugIcon.pauseForeground

debugIcon.stopForeground

debugIcon.disconnectForeground

debugIcon.restartForeground

debugIcon.stepOverForeground

debugIcon.stepIntoForeground

debugIcon.stepOutForeground

debugIcon.continueForeground

debugIcon.stepBackForeground

debugConsole.infoForeground

  • Under investigation (1.46.0 or later).

debugConsole.warningForeground

  • Under investigation (1.46.0 or later).

debugConsole.errorForeground

  • Under investigation (1.46.0 or later).

debugConsole.sourceForeground

  • Under investigation (1.46.0 or later).

debugConsoleInputIcon.foreground

  • Under investigation (1.46.0 or later).