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. テキストボックスやリストの項目にフォーカス、または単語を選択等。
  • ハイコントラストテーマ用。name-color-theme.json"type": "hc-black" の時のみ適用される。ただし、settings.jsonworkbench.colorCustomizations セクションに追加すればどのテーマにも適用される。

contrastBorder

contrastBorder Screenshot
  • ウインドウ、ボタン、バッジ等のボーダー。
  • ハイコントラストテーマ用。name-color-theme.json"type": "hc-black" の時のみ適用される。settings.jsonworkbench.colorCustomizations セクションに記述すればどのテーマにも適用される。

Base colors

focusBorder

focusBorder Screenshot
  1. テキストボックスやリスト等にフォーカス。
  • 場所によってはクリックした時だけボーダーの色が変化する。

foreground

foreground Screenshot
  • タブバー右のアイコンやパネル内の一部の文字やアイコンなど。

widget.shadow

widget.shadow Screenshot
  1. Find(⌘ + F / Ctrl + F) や Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P) 等の影。

selection.background

selection.background Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. "Find" に test と入力。
  3. 入力したテキストを選択。

descriptionForeground

descriptionForeground Screenshot
  1. Welcome (Help > Welcome) を表示。

errorForeground

errorForeground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. ヒットしない文字列を検索。

icon.foreground

icon.foreground Screenshot
  1. Find(⌘ + F / Ctrl + F) のアイコンや Editor Gutter のアイコン。

Window border

window.activeBorder

window.activeBorder Screenshot
  1. Visual Studio Code のウインドウをアクティブにする。
  • window.inactiveBorder が指定されていない場合は、全てのウインドウの枠がこの色になる。

window.inactiveBorder

window.inactiveBorder Screenshot
  1. Visual Studio Code のウインドウを非アクティブにする。

Text colors

textBlockQuote.background

textBlockQuote.background Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に Java Test Runner ↩︎ と入力。
  3. リストから "Java Test Runner" を選択。

textBlockQuote.border

textBlockQuote.border Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に Java Test Runner ↩︎ と入力。
  3. リストから "Java Test Runner" を選択。

textCodeBlock.background

textCodeBlock.background Screenshot
  1. New File(⌘ + N / ctrl + N)。
  2. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  3. "Select Language Mode" に HTML ↩︎ と入力。
  4. Editor に ! Tab と入力。
  5. <meta charset="... の charset にマウスオーバー。

textLink.activeForeground

textLink.activeForeground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に Debugger for Microsoft Edge ↩︎ と入力。
  3. リストから "Debugger for Microsoft Edge" を選択。
  4. "Getting Started" セクションの "1. Install the extension." にマウスオーバー。

textLink.foreground

textLink.foreground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に Debugger for Microsoft Edge ↩︎ と入力。
  3. リストから "Debugger for Microsoft Edge" を選択。

textPreformat.foreground

textPreformat.foreground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に Debugger for Microsoft Edge ↩︎ と入力。
  3. リストから "Debugger for Microsoft Edge" を選択。

textSeparator.foreground

  • 調査中。

Button control

button.background

button.background Screenshot
  1. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。

button.foreground

button.foreground Screenshot
  1. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。

button.hoverBackground

button.hoverBackground Screenshot
  1. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  2. "Open Folder" ボタンにマウスオーバー。

checkbox.background

checkbox.background Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  • "Settings" のチェックボックスは settings.checkboxBackground によって上書きされる。

checkbox.foreground

checkbox.foreground Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  • "Settings" のチェックボックスは settings.checkboxForeground によって上書きされる。

checkbox.border

checkbox.border Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  • "Settings" のチェックボックスは settings.checkboxBorder によって上書きされる。

Input control

input.background

input.background Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。

input.border

input.border Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。

input.foreground

input.foreground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. "Find" に test と入力。

input.placeholderForeground

input.placeholderForeground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  • テキストボックスは空にする。

inputOption.activeBackground

inputOption.activeBackground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R) を有効にする。

inputOption.activeForeground

inputOption.activeForeground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R) を有効にする。

inputOption.activeBorder

inputOption.activeBorder Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R) を有効にする。

inputValidation.errorBackground

inputValidation.errorBackground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R) を有効にする。
  3. "Find" に \ と入力。

inputValidation.errorForeground

inputValidation.errorForeground Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R) を有効にする。
  3. "Find" に \ と入力。

inputValidation.errorBorder

inputValidation.errorBorder Screenshot
  1. Find(⌘ + F / Ctrl + F) を表示。
  2. Use Regular Expression(⌥ + ⌘ + R / Ctrl + Alt + R) を有効にする。
  3. "Find" に \ と入力。

inputValidation.infoBackground

  • 調査中。

inputValidation.infoForeground

  • 調査中。

inputValidation.infoBorder

  • 調査中。

inputValidation.warningBackground

inputValidation.warningBackground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. ⌘ + O / Ctrl + O を押して test フォルダを開く。
  4. Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
  5. "Initialize Repository" ボタンをクリック。
  6. "Source Control" の "Message" に test test test test test test test test test test test を入力(↩︎ は押さない)。

inputValidation.warningForeground

inputValidation.warningForeground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. ⌘ + O / Ctrl + O を押して test フォルダを開く。
  4. Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
  5. "Initialize Repository" ボタンをクリック。
  6. "Source Control" の "Message" に test test test test test test test test test test test を入力(↩︎ は押さない)。

inputValidation.warningBorder

inputValidation.warningBorder Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. ⌘ + O / Ctrl + O を押して test フォルダを開く。
  4. Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
  5. "Initialize Repository" ボタンをクリック。
  6. "Source Control" の "Message" に test test test test test test test test test test test を入力(↩︎ は押さない)。

Scrollbar control

scrollbar.shadow

scrollbar.shadow Screenshot
  1. スクロールバーが表示されるまで ↩︎ を押す。
  2. スクロールする。

scrollbarSlider.activeBackground

scrollbarSlider.activeBackground Screenshot
  1. スクロールバーのスライダーをドラッグ。

scrollbarSlider.background

scrollbarSlider.activeBackground Screenshot
  1. スクロールバーの色。

scrollbarSlider.hoverBackground

scrollbarSlider.hoverBackground Screenshot
  1. スクロールバーのスライダーにマウスオーバー。

Badge

badge.foreground

badge.foreground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。

badge.background

badge.background Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。

Progress bar

progressBar.background

progressBar.background Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に test と入力。
  • "Message" の上に1秒程度の短い時間プログレスバーが表示される。

Lists and trees

list.activeSelectionBackground

list.activeSelectionBackground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Extensions" のリストの項目を選択。

list.activeSelectionForeground

list.activeSelectionForeground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Extensions" のリストの項目を選択。

list.dropBackground

list.dropBackground Screenshot
  1. デスクトップに test フォルダを作成。
  2. test フォルダの中に test2 フォルダを作成。
  3. Visual Studio Code に戻る。
  4. ⌘ + O / Ctrl + O を押して test フォルダを開く。
  5. New File(⌘ + N / ctrl + N)。
  6. Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
  7. 保存したファイルをドラッグして test2 フォルダ上に合わせる。

list.focusBackground

list.focusBackground Screenshot
  1. Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。

list.focusForeground

list.focusForeground Screenshot
  1. Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。

list.highlightForeground

list.highlightForeground Screenshot
  1. Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。
  2. ">" に続けて git と入力(↩︎ は押さない)。

list.hoverBackground

list.hoverBackground Screenshot
  1. Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。
  2. アクティブな項目以外にマウスオーバー。

list.hoverForeground

list.hoverForeground Screenshot
  1. Quick Pick(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。
  2. アクティブな項目以外にマウスオーバー。

list.inactiveSelectionBackground

list.hoverForeground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Extensions" のリストの項目を選択。
  3. リスト以外の場所をクリック。

list.inactiveSelectionForeground

list.inactiveSelectionForeground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Extensions" のリストの項目を選択。
  3. リスト以外の場所をクリック。

list.inactiveFocusBackground

list.inactiveSelectionForeground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Extensions" のリストの先頭の項目を選択。
  3. を押す。
  4. リスト以外の場所をクリック。

list.invalidItemForeground

list.invalidItemForeground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. ⌘ + O / Ctrl + O を押して test フォルダを開く。
  4. File > Save Workspace As... を選択。
  5. test.code-workspace と名前をつけて保存。
  6. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  7. test.code-workspace を開く。
  8. "path": ".""path": "test" に変更。
  9. Save(⌘ + S / Ctrl + S)。
  • この方法で Explorer の test フォルダの色が変わらない場合は、一度 test フォルダをクリックした後にフォーカスを外す。

list.errorForeground

list.errorForeground Screenshot
  1. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  2. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  3. "Select Language Mode" に JavaScript ↩︎ と入力。
  4. Editor に function() と入力。

list.warningForeground

list.warningForeground Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に HTMLHint と入力。
  3. "HTMLHint" の "Install" ボタンを押す。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  6. "Select Language Mode" に HTML ↩︎ と入力。
  7. Editor に test と入力。
  8. Save(⌘ + S / Ctrl + S) で test.html と名前をつけて保存。

listFilterWidget.background

listFilterWidget.background Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に HTML ↩︎ と入力。
  3. Editor に ! Tab と入力。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. "Outline" ビューを開く。
  6. "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
  7. meta と入力。

listFilterWidget.outline

listFilterWidget.outline Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に HTML ↩︎ と入力。
  3. Editor に ! Tab と入力。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. "Outline" ビューを開く。
  6. "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
  7. meta と入力。

listFilterWidget.noMatchesOutline

listFilterWidget.noMatchesOutline Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に HTML ↩︎ と入力。
  3. Editor に ! Tab と入力。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. "Outline" ビューを開く。
  6. "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
  7. h1 と入力。

list.filterMatchBackground

list.filterMatchBackground Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に HTML ↩︎ と入力。
  3. Editor に ! Tab と入力。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. "Outline" ビューを開く。
  6. "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
  7. meta と入力。

list.filterMatchBorder

list.filterMatchBorder Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に HTML ↩︎ と入力。
  3. Editor に ! Tab と入力。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. "Outline" ビューを開く。
  6. "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
  7. meta と入力。

tree.indentGuidesStroke

tree.indentGuidesStroke Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に HTML ↩︎ と入力。
  3. Editor に ! Tab と入力。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. "Outline" ビューを開く。
  6. "Outline" ビューにマウスオーバー。

list.deemphasizedForeground

list.deemphasizedForeground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  4. "Search Extensions in Marketplace" に Debugger for Chrome と入力。
  5. "Debugger for Chrome" の "Install" ボタンを押す。
  6. ⌘ + O / Ctrl + O を押して test フォルダを開く。
  7. Run(⇧ + ⌘ + D / Ctrl + Shift + D) を表示。
  8. "launch.json file" リンクをクリック。
  9. "Chrome" を選択。
  10. launch.json"url": "http://localhost:8080","file": "${workspaceRoot}/test.html", に書き換えて保存。
  11. New File(⌘ + N / ctrl + N)。
  12. Editor に次のコードを入力。
    <!DOCTYPE html>
    <script src="test.js"></script>
  13. Save(⌘ + S / Ctrl + S) で test.html と名前をつけて保存。
  14. New File(⌘ + N / ctrl + N)。
  15. Editor に alert('test'); と入力。
  16. Save(⌘ + S / Ctrl + S) で test.js と名前をつけて保存。
  17. 行番号の左側の空白部分にマウスオーバーすると、ドットが表示されるので、そのドットをクリック。
  18. "Run" パネル上部の右向きの三角形のアイコンをクリック。
  19. "Run" パネルの "Call Stack" ビューを開く。
  20. "Call Stack" ビューからフォーカスを外す。
  • Google Chrome がインストールされていること。

Activity Bar

activityBar.background

activityBar.background Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。

activityBar.dropBackground

  • 1.46.0 で削除された項目。

activityBar.dropBorder

activityBar.foreground Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. Explorer アイコンをアクティビティバー内でドラッグ。

activityBar.foreground

activityBar.foreground Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。

activityBar.inactiveForeground

activityBar.inactiveForeground Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。

activityBar.border

activityBar.border Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。

activityBarBadge.background

activityBarBadge.background Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. ↩︎ を入力。

activityBarBadge.foreground

activityBarBadge.foreground Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. ↩︎ を入力。

activityBar.activeBorder

activityBarBadge.foreground Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. ↩︎ を入力。

activityBar.activeBackground

activityBar.activeBackground Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。

activityBar.activeFocusBorder

activityBar.activeFocusBorder Screenshot
  1. View > Appearance > Show Activity Bar を選択(アクティビティバーが表示されていない場合)。
  2. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  3. "Activity Bar"の "Explorer" アイコンをクリック。

Minimap

minimap.findMatchHighlight

minimap.findMatchHighlight Screenshot
  1. Editor に test ↩︎ と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。

minimap.selectionHighlight

minimap.selectionHighlight Screenshot
  1. Editor に test と入力。
  2. ⌘ + A / Ctrl + A でテキストを選択。

minimap.errorHighlight

minimap.errorHighlight Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に function() ↩︎ と入力。

minimap.warningHighlight

minimap.warningHighlight Screenshot
  1. Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
  2. "Search Extensions in Marketplace" に HTMLHint と入力。
  3. "HTMLHint" の "Install" ボタンを押す。
  4. Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
  5. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  6. "Select Language Mode" に HTML ↩︎ と入力。
  7. Editor に test と入力。
  8. Save(⌘ + S / Ctrl + S) で test.html と名前をつけて保存。

minimap.background

minimap.background Screenshot
  1. View > Show Minimap を選択(ミニマップが表示されていない場合)。

minimapSlider.background

minimapSlider.background Screenshot
  1. View > Show Minimap を選択(ミニマップが表示されていない場合)。
  2. スクロールが発生するまで ↩︎ を押し続ける。

minimapSlider.hoverBackground

minimapSlider.hoverBackground Screenshot
  1. View > Show Minimap を選択(ミニマップが表示されていない場合)。
  2. スクロールが発生するまで ↩︎ を押し続ける。
  3. Minimap のスライダーにマウスオーバー。

minimapSlider.activeBackground

minimapSlider.activeBackground Screenshot
  1. View > Show Minimap を選択(ミニマップが表示されていない場合)。
  2. スクロールが発生するまで ↩︎ を押し続ける。
  3. Minimap のスライダーをドラッグ。

minimapGutter.addedBackground

minimapGutter.addedBackground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. 最初に作った test フォルダを開く。
  4. Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
  5. "Initialize Repository" ボタンをクリック。
  6. New File(⌘ + N / ctrl + N)。
  7. Editor に test と入力。
  8. Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
  9. "Source Control: Git" の "Message" に test ↩︎ と入力。
  10. "There are no staged changes to commit." というダイアログが表示されるので、"Yes" ボタンを押す。
  11. Editor に戻り test の行にカーソルを移動。
  12. ↩︎ を押す。

minimapGutter.modifiedBackground

minimapGutter.modifiedBackground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. 最初に作った test フォルダを開く。
  4. Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
  5. "Initialize Repository" ボタンをクリック。
  6. New File(⌘ + N / ctrl + N)。
  7. Editor に test と入力。
  8. Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
  9. "Source Control: Git" の "Message" に test ↩︎ と入力。
  10. "There are no staged changes to commit." というダイアログが表示されるので、"Yes" ボタンを押す。
  11. Editor に戻り test と書かれた行に 2 と入力。

minimapGutter.deletedBackground

minimapGutter.deletedBackground Screenshot
  1. デスクトップに test フォルダを作成。
  2. Visual Studio Code に戻る。
  3. 最初に作った test フォルダを開く。
  4. Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
  5. "Initialize Repository" ボタンをクリック。
  6. New File(⌘ + N / ctrl + N)。
  7. Editor に次のコードを入力。
    test
    test2
  8. Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
  9. "Source Control: Git" の "Message" に test ↩︎ と入力。
  10. "There are no staged changes to commit." というダイアログが表示されるので、"Yes" ボタンを押す。
  11. Editor に戻り test と書かれた行をクリック。
  12. ⇧ + ⌘ + K / Ctrl + Shift + K で行を削除。

Editor Groups & Tabs

editorGroup.border

editorGroup.border Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

editorGroup.dropBackground

editorGroup.dropBackground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
  2. 分割された Editor のタブをドラッグしてもう片方の Editor に重ねる。

editorGroupHeader.noTabsBackground

editorGroupHeader.noTabsBackground Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  2. "Search settings" に workbench.editor.showTabs ↩︎ と入力。
  3. "Workbench > Editor: Show Tabs" をオフにする。

editorGroupHeader.tabsBackground

editorGroupHeader.tabsBackground Screenshot
  • タブコンテナの背景。

editorGroupHeader.tabsBorder

editorGroupHeader.tabsBorder Screenshot
  1. Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
  • Breadcrumbs が表示されているときのみ。

editorGroupHeader.border

editorGroupHeader.border Screenshot
  1. Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
  • Breadcrumbs が表示されていないときはタブコンテナのボーダーになる。

editorGroup.emptyBackground

editorGroup.emptyBackground Screenshot
  1. View > Editor Layout > Two Columns を選択。
  2. 右側の Editor をクリック。

editorGroup.focusedEmptyBorder

editorGroup.focusedEmptyBorder Screenshot
  1. View > Editor Layout > Two Columns を選択。
  2. 新しく作られた左側の Editor をクリック。

tab.activeBackground

tab.activeBackground Screenshot
  • アクティブなタブの背景色。

tab.unfocusedActiveBackground

tab.unfocusedActiveBackground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

tab.activeForeground

tab.activeForeground Screenshot
  • アクティブなタブの前景色。

tab.border

tab.border Screenshot
  • タブのボーダー。

tab.activeBorder

tab.activeBorder Screenshot
  • アクティブなタブのボーダー。

tab.unfocusedActiveBorder

tab.unfocusedActiveBorder Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

tab.activeBorderTop

tab.activeBorderTop Screenshot
  • アクティブなタブのボーダー。

tab.unfocusedActiveBorderTop

tab.unfocusedActiveBorderTop Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

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 + \) で Editor を分割。

tab.inactiveForeground

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

tab.unfocusedActiveForeground

tab.unfocusedActiveForeground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

tab.unfocusedInactiveForeground

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

tab.hoverBackground

tab.hoverBackground Screenshot
  1. タブにマウスオーバー。

tab.unfocusedHoverBackground

tab.unfocusedHoverBackground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
  2. フォーカスされていない方の Editor のタブにマウスオーバー。
  • tab.hoverBackground が指定されていない場合は、フォーカスされているタブもこの色になる。

tab.hoverForeground

tab.hoverForeground Screenshot
  1. タブにマウスオーバー。

tab.unfocusedHoverForeground

tab.unfocusedHoverForeground Screenshot
  1. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
  2. フォーカスされていない方の Editor のタブにマウスオーバー。
  • tab.hoverForeground が指定されていない場合は、フォーカスされているタブもこの色になる。

tab.hoverBorder

  • 調査中。

tab.unfocusedHoverBorder

  • 調査中。

tab.activeModifiedBorder

tab.activeModifiedBorder Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  2. "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
  3. "Workbench > Editor: Highlight Modified Tabs" をオンにする。
  4. Editor に何か文字を入力。

tab.inactiveModifiedBorder

tab.inactiveModifiedBorder Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  2. "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
  3. "Workbench > Editor: Highlight Modified Tabs" をオンにする。
  4. Editor に何か文字を入力。
  5. New File(⌘ + N / ctrl + N)。

tab.unfocusedActiveModifiedBorder

tab.unfocusedActiveModifiedBorder Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  2. "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
  3. "Workbench > Editor: Highlight Modified Tabs" をオンにする。
  4. Editor に何か文字を入力。
  5. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

tab.unfocusedInactiveModifiedBorder

tab.unfocusedInactiveModifiedBorder Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  2. "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
  3. "Workbench > Editor: Highlight Modified Tabs" をオンにする。
  4. Editor に何か文字を入力。
  5. New File(⌘ + N / ctrl + N)。
  6. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

editorPane.background

editorPane.background Screenshot
  1. Zen Mode(⌘ + K, Z / Ctrl + K, Z) を表示。

Editor colors

editor.background

editor.background Screenshot
  • Editor の背景色。

editor.foreground

editor.foreground Screenshot
  • Editor の前景色。

editorLineNumber.foreground

editorLineNumber.foreground Screenshot
  1. ↩︎ を入力。

editorLineNumber.activeForeground

editorLineNumber.activeForeground Screenshot
  • 現在の行番号の色。

editorCursor.background

editorCursor.background Screenshot
  1. Settings(⌘ + , / Ctrl + ,) を表示。
  2. "Search settings" に editor.cursorStyles ↩︎ と入力。
  3. "Editor: Cursor Style" で "Block" を選択。
  4. Editor に何か文字を入力。
  5. 入力した文字にカーソルを合わせる。
  • 変化するのはカーソルではなく、カーソルの下にある文字の色。

editorCursor.foreground

editorCursor.foreground Screenshot
  • カーソルの色。

editor.selectionBackground

editor.selectionBackground Screenshot
  1. Editor に何かテキストを入力。
  2. ⌘ + A / Ctrl + A でテキストを選択。

editor.selectionForeground

editor.selectionForeground Screenshot
  1. Editor に何かテキストを入力。
  2. ⌘ + A / Ctrl + A でテキストを選択。
  • ハイコントラストテーマ用。name-color-theme.json"type": "hc-black" の時のみ適用される。

editor.inactiveSelectionBackground

editor.inactiveSelectionBackground Screenshot
  1. Editor に何かテキストを入力。
  2. ⌘ + A / Ctrl + A でテキストを選択。
  3. Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。

editor.selectionHighlightBackground

editor.selectionHighlightBackground Screenshot
  1. Editor に test test と入力。
  2. ⇧ + ⌘ + ← / Ctrl + Shift + ← で最後の test を選択。

editor.selectionHighlightBorder

editor.selectionHighlightBorder Screenshot
  1. Editor に test test と入力。
  2. ⇧ + ⌘ + ← / Ctrl + Shift + ← で最後の test を選択。

editor.wordHighlightBackground

editor.wordHighlightBackground Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に 'test' と入力。
  4. test の間にカーソルを置く。

editor.wordHighlightBorder

editor.wordHighlightBorder Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に 'test' と入力。
  4. test の間にカーソルを置く。

editor.wordHighlightStrongBackground

editor.wordHighlightStrongBackground Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に let test = と入力。
  4. test の間にカーソルを置く。

editor.wordHighlightStrongBorder

editor.wordHighlightStrongBorder Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に let test = と入力。
  4. test の間にカーソルを置く。

editor.findMatchBackground

editor.findMatchBackground Screenshot
  1. Editor に test test と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。
  4. ⇧ + ⌘ + G / Shift + F3 で検索結果にフォーカス。

editor.findMatchHighlightBackground

editor.findMatchHighlightBackground Screenshot
  1. Editor に test と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。

editor.findRangeHighlightBackground

editor.findRangeHighlightBackground Screenshot
  1. Editor に test と入力。
  2. ⌘ + A / Ctrl + A で全選択。
  3. Find(⌘ + F / Ctrl + F) を表示。
  4. Find in selection(⌥ + ⌘ + L / Alt + L) を有効にする。

editor.findMatchBorder

editor.findMatchBorder Screenshot
  1. Editor に test test と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。
  4. ⇧ + ⌘ + G / Shift + F3 で検索結果にフォーカス。

editor.findMatchHighlightBorder

editor.findMatchHighlightBorder Screenshot
  1. Editor に test と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。

editor.findRangeHighlightBorder

editor.findRangeHighlightBorder Screenshot
  1. Editor に test と入力。
  2. ⌘ + A / Ctrl + A で全選択。
  3. Find(⌘ + F / Ctrl + F) を表示。
  4. Find in selection(⌥ + ⌘ + L / Alt + L) を有効にする。

searchEditor.findMatchBackground

searchEditor.findMatchBackground Screenshot
  1. Editor に test と入力。
  2. Search(⇧ + ⌘ + F / Ctrl + Shift + F) を表示。
  3. "Search" に test と入力。
  4. ⌘ + ↩︎ / Ctrl + ↩︎ で Search Editor を表示。

searchEditor.findMatchBorder

searchEditor.findMatchBorder Screenshot
  1. Editor に test と入力。
  2. Search(⇧ + ⌘ + F / Ctrl + Shift + F) を表示。
  3. "Search" に test と入力。
  4. ⌘ + ↩︎ / Ctrl + ↩︎ で Search Editor を表示。

searchEditor.textInputBorder

searchEditor.textInputBorder Screenshot
  1. Command Palette(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。
  2. "Search Editor: Open new Search Editor" を選択。
  3. Tab で Search Editor のテキストインプットフォームからフォーカスを外す。

editor.hoverHighlightBackground

editor.hoverHighlightBackground Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に test␣ と入力。
  4. test にマウスオーバー。

editor.lineHighlightBackground

editor.lineHighlightBackground Screenshot
  1. ↩︎ を入力。

editor.lineHighlightBorder

editor.lineHighlightBorder Screenshot
  1. ↩︎ を入力。

editorLink.activeForeground

editorLink.activeForeground Screenshot
  1. Editor に https://code.visualstudio.com と入力。
  2. / Ctrl を押しながら "https://code.visualstudio.com" にマウスオーバー。

editor.rangeHighlightBackground

editor.rangeHighlightBackground Screenshot
  1. Editor に test test と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。
  4. ⇧ + ⌘ + G / Shift + F3 で検索結果にフォーカス。

editor.rangeHighlightBorder

editor.rangeHighlightBorder Screenshot
  1. Editor に test test と入力。
  2. Find(⌘ + F / Ctrl + F) を表示。
  3. "Find" に test と入力。
  4. ⇧ + ⌘ + G / Shift + F3 で検索結果にフォーカス。

editor.symbolHighlightBackground

editor.symbolHighlightBackground Screenshot
  1. Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
  2. "Select Language Mode" に JavaScript ↩︎ と入力。
  3. Editor に次のコードを入力。
    let test
    test
  4. test / Ctrl を押しながらクリック。

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

  • 1.46.0 で削除された項目。

panel.dropBorder

  • 調査中(1.46.0 以降)。

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

  • 調査中(1.46.0 以降)。

debugConsole.warningForeground

  • 調査中(1.46.0 以降)。

debugConsole.errorForeground

  • 調査中(1.46.0 以降)。

debugConsole.sourceForeground

  • 調査中(1.46.0 以降)。

debugConsoleInputIcon.foreground

  • 調査中(1.46.0 以降)。