エージェント型開発を探求する -

テーマカラー

現在アクティブな Visual Studio Code のカラーテーマは、ユーザー設定workbench.colorCustomizations を使用してカスタマイズできます。

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00"
  }
}

: 既存のカラーテーマを使用したい場合は、カラーテーマを参照してください。ここでは、基本設定: カラーテーマドロップダウン(⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T))を使用してアクティブなカラーテーマを設定する方法を学ぶことができます。

テーマカラーはウェブビュー内で CSS 変数として利用可能であり、それらの IntelliSense を提供する拡張機能も用意されています。

カラー形式

カラー値は、透明度を表すアルファチャネル付きの RGB カラーモデルで定義できます。形式としては、#RGB#RGBA#RRGGBB#RRGGBBAA という 16 進表記がサポートされています。R(赤)、G(緑)、B(青)、A(アルファ)は 16 進文字(0-9, a-f または A-F)です。3 桁の表記(#RGB)は 6 桁形式(#RRGGBB)の短縮版であり、4 桁の RGB 表記(#RGBA)は 8 桁形式(#RRGGBBAA)の短縮版です。例えば、#e35f#ee3355ff と同じ色です。

アルファ値が定義されていない場合、デフォルトは ff(不透明、透明度なし)です。アルファが 00 に設定されている場合、その色は完全に透明になります。

他の注釈を隠さないように、一部の色は不透明にしてはいけません。どの色がこれに該当するかは、各色の説明を確認してください。

コントラストカラー

コントラストカラーは通常、ハイコントラストテーマに対してのみ設定されます。設定された場合、UI 全体の要素の周囲に境界線を追加し、コントラストを強調します。

  • contrastActiveBorder: アクティブな要素を他と分離し、より高いコントラストを持たせるための追加の境界線。
  • contrastBorder: 要素を他と分離し、より高いコントラストを持たせるための追加の境界線。

基本カラー

  • focusBorder: フォーカスされた要素の全体的な境界線色。この色は、コンポーネントによって上書きされない場合にのみ使用されます。
  • foreground: 全体的な前景(文字)色。この色は、コンポーネントによって上書きされない場合にのみ使用されます。
  • disabledForeground: 無効化された要素の全体的な前景(文字)色。この色は、コンポーネントによって上書きされない場合にのみ使用されます。
  • widget.border: エディター内の検索/置換などのウィジェットの境界線色。
  • widget.shadow: エディター内の検索/置換などのウィジェットの影の色。
  • selection.background: ワークベンチ内のテキスト選択の背景色(入力フィールドやテキストエリア用。エディターやターミナル内の選択には適用されません)。
  • descriptionForeground: ラベルなど、補足情報を提供する説明テキストの前景(文字)色。
  • errorForeground: エラーメッセージの全体的な前景(文字)色(この色は、コンポーネントによって上書きされない場合にのみ使用されます)。
  • icon.foreground: ワークベンチ内のアイコンのデフォルト色。
  • sash.hoverBorder: ドラッグ可能なサッシュ(境界線)のホバー時の境界線色。

ウィンドウの境界線

VS Code ウィンドウの境界線のテーマカラー。

  • window.activeBorder: アクティブ(フォーカスあり)ウィンドウの境界線色。
  • window.inactiveBorder: 非アクティブ(フォーカスなし)ウィンドウの境界線色。

ウィンドウ境界線の色は、macOS と Linux でのみサポートされており(Windows は非対応)、カスタムタイトルバーが有効("window.titleBarStyle": "custom")な場合にのみ機能します。

テキストカラー

ウェルカムページなどのテキストドキュメント内の色。

  • textBlockQuote.background: テキスト内の引用ブロックの背景色。
  • textBlockQuote.border: テキスト内の引用ブロックの境界線色。
  • textCodeBlock.background: テキスト内のコードブロックの背景色。
  • textLink.activeForeground: テキスト内のリンクをクリックした時、およびマウスホバー時の前景(文字)色。
  • textLink.foreground: テキスト内のリンクの前景(文字)色。
  • textPreformat.foreground: 整形済みテキストセグメントの前景(文字)色。
  • textPreformat.background: 整形済みテキストセグメントの背景色。
  • textPreformat.border: 整形済みテキストセグメントの境界線色。
  • textSeparator.foreground: テキスト区切り線の色。

アクションカラー

ワークベンチ全体のアクションとの対話を制御するための一連の色。

  • toolbar.hoverBackground: マウスでアクションの上にホバーした時のツールバーの背景色。
  • toolbar.hoverOutline: マウスでアクションの上にホバーした時のツールバーの輪郭線。
  • toolbar.activeBackground: アクション上でマウスボタンを押している時のツールバーの背景色。
  • editorActionList.background: アクションリストの背景色。
  • editorActionList.foreground: アクションリストの前景(文字)色。
  • editorActionList.focusForeground: フォーカスされたアクションリスト項目の前景(文字)色。
  • editorActionList.focusBackground: フォーカスされたアクションリスト項目の背景色。

ボタンコントロール

新しいウィンドウのエクスプローラーにある フォルダーを開く ボタンなどのボタンウィジェット用の一連の色。

button control

  • button.background: ボタンの背景色。
  • button.foreground: ボタンの前景(文字)色。
  • button.border: ボタンの境界線色。
  • button.separator: ボタンの区切り線の色。
  • button.hoverBackground: ホバー時のボタンの背景色。
  • button.secondaryForeground: セカンダリボタンの前景(文字)色。
  • button.secondaryBackground: セカンダリボタンの背景色。
  • button.secondaryHoverBackground: ホバー時のセカンダリボタンの背景色。
  • button.secondaryBorder: セカンダリボタンの境界線色。
  • checkbox.background: チェックボックスウィジェットの背景色。
  • checkbox.foreground: チェックボックスウィジェットの前景(文字)色。
  • checkbox.disabled.background: 無効化されたチェックボックスの背景色。
  • checkbox.disabled.foreground: 無効化されたチェックボックスの前景(文字)色。
  • checkbox.border: チェックボックスウィジェットの境界線色。
  • checkbox.selectBackground: 要素が選択されている時のチェックボックスウィジェットの背景色。
  • checkbox.selectBorder: 要素が選択されている時のチェックボックスウィジェットの境界線色。
  • radio.activeForeground: アクティブなラジオボタンオプションの前景(文字)色。
  • radio.activeBackground: アクティブなラジオボタンオプションの背景色。
  • radio.activeBorder: アクティブなラジオボタンオプションの境界線色。
  • radio.inactiveForeground: 非アクティブなラジオボタンオプションの前景(文字)色。
  • radio.inactiveBackground: 非アクティブなラジオボタンオプションの背景色。
  • radio.inactiveBorder: 非アクティブなラジオボタンオプションの境界線色。
  • radio.inactiveHoverBackground: ホバー時の非アクティブなラジオボタンオプションの背景色。

統合ターミナルや出力パネルなどのすべてのドロップダウンウィジェット用の一連の色。なお、ドロップダウンコントロールは現在 macOS では使用されていません。

dropdown control

  • dropdown.background: ドロップダウンの背景色。
  • dropdown.listBackground: ドロップダウンリストの背景色。
  • dropdown.border: ドロップダウンの境界線色。
  • dropdown.foreground: ドロップダウンの前景(文字)色。

入力コントロール

検索ビューや検索/置換ダイアログなどの入力コントロール用カラー。

input control

  • input.background: 入力ボックスの背景色。
  • input.border: 入力ボックスの境界線色。
  • input.foreground: 入力ボックスの前景(文字)色。
  • input.placeholderForeground: 入力ボックスのプレースホルダーテキストの前景(文字)色。
  • inputOption.activeBackground: 入力フィールドで有効化されたオプションの背景色。
  • inputOption.activeBorder: 入力フィールドで有効化されたオプションの境界線色。
  • inputOption.activeForeground: 入力フィールドで有効化されたオプションの前景(文字)色。
  • inputOption.hoverBackground: 入力フィールドで有効化されたオプションのホバー時の背景色。
  • inputValidation.errorBackground: エラーレベルの入力検証背景色。
  • inputValidation.errorForeground: エラーレベルの入力検証前景(文字)色。
  • inputValidation.errorBorder: エラーレベルの入力検証境界線色。
  • inputValidation.infoBackground: 情報レベルの入力検証背景色。
  • inputValidation.infoForeground: 情報レベルの入力検証前景(文字)色。
  • inputValidation.infoBorder: 情報レベルの入力検証境界線色。
  • inputValidation.warningBackground: 警告レベルの入力検証背景色。
  • inputValidation.warningForeground: 警告レベルの入力検証前景(文字)色。
  • inputValidation.warningBorder: 警告レベルの入力検証境界線色。

スクロールバーコントロール

  • scrollbar.background: スクロールバートラック(溝)の背景色。
  • scrollbar.shadow: ビューがスクロールされていることを示すためのスクロールバースライダーの影。
  • scrollbarSlider.activeBackground: クリックした時のスクロールバースライダーの背景色。
  • scrollbarSlider.background: スクロールバースライダーの背景色。
  • scrollbarSlider.hoverBackground: ホバー時のスクロールバースライダーの背景色。

バッジ

バッジは、検索結果の件数などの小さな情報ラベルです。

  • badge.foreground: バッジの前景(文字)色。
  • badge.background: バッジの背景色。

プログレスバー

  • progressBar.background: 長時間実行される操作に対して表示されるプログレスバーの背景色。

リストとツリー

ファイルエクスプローラーのようなリストやツリーの色。アクティブなリスト/ツリーはキーボードフォーカスを持ち、非アクティブなリスト/ツリーは持ちません。

  • list.activeSelectionBackground: リスト/ツリーがアクティブな時の選択項目の背景色。
  • list.activeSelectionForeground: リスト/ツリーがアクティブな時の選択項目の前景(文字)色。
  • list.activeSelectionIconForeground: リスト/ツリーがアクティブな時の選択項目のアイコン前景(文字)色。
  • list.dropBackground: マウスで項目を移動する時のリスト/ツリーのドラッグ&ドロップ背景色。
  • list.focusBackground: リスト/ツリーがアクティブな時のフォーカスされた項目の背景色。
  • list.focusForeground: リスト/ツリーがアクティブな時のフォーカスされた項目の前景(文字)色。
  • list.focusHighlightForeground: リスト/ツリー内で検索する時に、アクティブにフォーカスされた項目内のマッチ部分を強調する前景(文字)色。
  • list.focusOutline: リスト/ツリーがアクティブな時のフォーカスされた項目の輪郭線色。
  • list.focusAndSelectionOutline: リスト/ツリーがアクティブで選択されている時のフォーカスされた項目の輪郭線色。
  • list.highlightForeground: リスト/ツリー内で検索する時に、マッチ部分を強調する前景(文字)色。
  • list.hoverBackground: マウスで項目をホバーした時のリスト/ツリーの背景色。
  • list.hoverForeground: マウスで項目をホバーした時のリスト/ツリーの前景(文字)色。
  • list.inactiveSelectionBackground: リスト/ツリーが非アクティブな時の選択項目の背景色。
  • list.inactiveSelectionForeground: リスト/ツリーが非アクティブな時の選択項目の前景(文字)色。
  • list.inactiveSelectionIconForeground: リスト/ツリーが非アクティブな時の選択項目のアイコン前景(文字)色。
  • list.inactiveFocusBackground: リストが非アクティブな時のフォーカスされた項目の背景色。現在はリストでのみサポートされています。
  • list.inactiveFocusOutline: リスト/ツリーが非アクティブな時のフォーカスされた項目の輪郭線色。
  • list.invalidItemForeground: エクスプローラー内の解決できないルートなど、無効な項目のリスト/ツリー前景(文字)色。
  • list.errorForeground: エラーを含むリスト項目の前景(文字)色。
  • list.warningForeground: 警告を含むリスト項目の前景(文字)色。
  • listFilterWidget.background: リスト/ツリー内で検索する際に入力したテキストのフィルター背景色。
  • listFilterWidget.outline: リスト/ツリー内で検索する際に入力したテキストのフィルターウィジェットの輪郭線色。
  • listFilterWidget.noMatchesOutline: リスト/ツリー内で検索する際、一致が見つからない場合のフィルターウィジェットの輪郭線色。
  • listFilterWidget.shadow: リストやツリー内の型フィルターウィジェットの影の色。
  • list.filterMatchBackground: リストやツリー内のフィルター一致部分の背景色。
  • list.filterMatchBorder: リストやツリー内のフィルター一致部分の境界線色。
  • list.deemphasizedForeground: 強調解除された項目のリスト/ツリー前景(文字)色。
  • list.dropBetweenBackground: マウス使用時に項目間に移動する際のリスト/ツリーのドラッグ&ドロップ境界線色。
  • tree.indentGuidesStroke: ツリーウィジェットのインデントガイドのストローク色。
  • tree.inactiveIndentGuidesStroke: アクティブではないインデントガイドのツリーストローク色。
  • tree.tableColumnsBorder: インデントガイドのツリーストローク色。
  • tree.tableOddRowsBackground: 奇数行のテーブルの背景色。

アクティビティバー

アクティビティバーは通常、ワークベンチの最左端または右端に表示され、サイドバーのビューを素早く切り替えることができます。

  • activityBar.background: アクティビティバーの背景色。
  • activityBar.dropBorder: アクティビティバー項目のドラッグ&ドロップフィードバック色。
  • activityBar.foreground: アクティビティバーの前景(文字)色(アイコンなどに使用されます)。
  • activityBar.inactiveForeground: 非アクティブ時のアクティビティバー項目の前景(文字)色。
  • activityBar.border: サイドバーとの境界線となるアクティビティバーの境界線色。
  • activityBarBadge.background: アクティビティ通知バッジの背景色。
  • activityBarBadge.foreground: アクティビティ通知バッジの前景(文字)色。
  • activityBar.activeBorder: アクティビティバーのアクティブ表示境界線色。
  • activityBar.activeBackground: アクティブな要素用のアクティビティバーの背景色(オプション)。
  • activityBar.activeFocusBorder: アクティブな項目に対するアクティビティバーのフォーカス境界線色。
  • activityBarTop.foreground: 上部に配置されたアクティビティバーのアクティブ項目の前景(文字)色。
  • activityBarTop.activeBorder: 上部に配置されたアクティビティバーのアクティブ項目のフォーカス境界線色。
  • activityBarTop.inactiveForeground: 上部に配置されたアクティビティバーの非アクティブ項目の前景(文字)色。
  • activityBarTop.dropBorder: 上部に配置されたアクティビティバーの項目のドラッグ&ドロップフィードバック色。
  • activityBarTop.background: 上部/下部に配置されたアクティビティバーの背景色。
  • activityBarTop.activeBackground: 上部/下部に配置されたアクティビティバーのアクティブ項目の背景色。
  • activityWarningBadge.foreground: 警告アクティビティバッジの前景(文字)色。
  • activityWarningBadge.background: 警告アクティビティバッジの背景色。
  • activityErrorBadge.foreground: エラーアクティビティバッジの前景(文字)色。
  • activityErrorBadge.background: エラーアクティビティバッジの背景色。

プロファイル

  • profileBadge.background: プロファイルバッジの背景色。アクティビティバーの設定歯車アイコンの上に表示されます。
  • profileBadge.foreground: プロファイルバッジの前景(文字)色。アクティビティバーの設定歯車アイコンの上に表示されます。
  • profiles.sashBorder: プロファイルエディターの分割ビューの境界線色。

サイドバーには、エクスプローラーや検索などのビューが含まれています。

  • sideBar.background: サイドバーの背景色。

  • sideBar.foreground: サイドバーの前景(文字)色。

  • sideBar.border: エディターと境界を接するサイドバーの境界線色。

  • sideBar.dropBackground: サイドバーセクションのドラッグ&ドロップフィードバック色。下のセクションが透けて見えるよう、透明度を含める必要があります。

  • sideBarTitle.foreground: サイドバータイトルの前景(文字)色。

  • sideBarSectionHeader.background: サイドバーセクションヘッダーの背景色。

  • sideBarSectionHeader.foreground: サイドバーセクションヘッダーの前景(文字)色。

  • sideBarSectionHeader.border: サイドバーセクションヘッダーの境界線色。

  • sideBarActivityBarTop.border: 上部/下部のアクティビティバーとビューとの間の境界線色。

  • sideBarTitle.background: サイドバータイトルの背景色。

  • sideBarTitle.border: サイドバー下部の境界線色(タイトルとビューを分離)。

  • sideBarStickyScroll.background: サイドバーのスティッキースクロールの背景色。

  • sideBarStickyScroll.border: サイドバーのスティッキースクロールの境界線色。

  • sideBarStickyScroll.shadow: サイドバーのスティッキースクロールの影の色。

ミニマップ

ミニマップは、現在のファイルの縮小版を表示します。

  • minimap.findMatchHighlight: ファイル内検索結果の強調表示色。

  • minimap.selectionHighlight: エディター選択範囲の強調表示色。

  • minimap.errorHighlight: エディター内のエラー強調表示色。

  • minimap.warningHighlight: エディター内の警告強調表示色。

  • minimap.background: ミニマップの背景色。

  • minimap.selectionOccurrenceHighlight: 繰り返し出現する選択範囲のミニマップマーカー色。

  • minimap.foregroundOpacity: ミニマップにレンダリングされる前景要素の不透明度(例: "#000000c0" は 75% の不透明度)。

  • minimap.infoHighlight: 情報用ミニマップマーカー色。

  • minimap.chatEditHighlight: ミニマップ内の保留中編集領域の色。

  • minimapSlider.background: ミニマップスライダーの背景色。

  • minimapSlider.hoverBackground: ホバー時のミニマップスライダーの背景色。

  • minimapSlider.activeBackground: クリック時のミニマップスライダーの背景色。

  • minimapGutter.addedBackground: 追加されたコンテンツのミニマップガター色。

  • minimapGutter.modifiedBackground: 変更されたコンテンツのミニマップガター色。

  • minimapGutter.deletedBackground: 削除されたコンテンツのミニマップガター色。

  • editorMinimap.inlineChatInserted: インラインチャットで挿入されたコンテンツのミニマップマーカー色。

エディターグループとタブ

エディターグループはエディターのコンテナです。タブはエディターのコンテナで、一つのグループ内に複数のタブを開くことができます。

  • editorGroup.border: 複数のエディターグループを分離する色。

    editorGroup.border

  • editorGroup.dropBackground: エディターをドラッグする時の背景色。

    editorGroup.dropBackground

  • editorGroupHeader.noTabsBackground: シングルタブ使用時のエディターグループタイトルヘッダーの背景色。

    editorGroupHeader.noTabsBackground

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

    editorGroupHeader.tabsBackground

  • editorGroupHeader.tabsBorder: タブが有効な時のエディタータブコントロール下の境界線色。

    editorGroupHeader.tabsBorder

  • editorGroupHeader.border: エディターグループヘッダーとエディター間の境界線色。

  • editorGroup.emptyBackground: 空のエディターグループの背景色。

  • editorGroup.focusedEmptyBorder: フォーカスされた空のエディターグループの境界線色。

  • editorGroup.dropIntoPromptForeground: ファイルドラッグ時に表示されるテキストの前景(文字)色。

  • editorGroup.dropIntoPromptBackground: ファイルドラッグ時に表示されるテキストの背景色。

  • editorGroup.dropIntoPromptBorder: ファイルドラッグ時に表示されるテキストの境界線色。

  • tab.activeBackground: アクティブグループ内のアクティブタブの背景色。

  • tab.unfocusedActiveBackground: 非アクティブグループ内のアクティブタブの背景色。

  • tab.activeForeground: アクティブグループ内のアクティブタブの前景(文字)色。

  • tab.border: タブ同士を分離する境界線色。

  • tab.activeBorder: アクティブタブの下部境界線色。

  • tab.selectedBorderTop: 選択されたタブの上部境界線色。

  • tab.selectedBackground: 選択されたタブの背景色。

  • tab.selectedForeground: 選択されたタブの前景(文字)色。

  • tab.dragAndDropBorder: タブが間に挿入可能であることを示すための境界線色。

  • tab.unfocusedActiveBorder: 非アクティブグループ内のアクティブタブの下部境界線色。

  • tab.activeBorderTop: アクティブタブの上部境界線色。

  • tab.unfocusedActiveBorderTop: 非アクティブグループ内のアクティブタブの上部境界線色。

  • tab.lastPinnedBorder: 固定されたタブと非固定タブを分離する、最後の固定タブ右側の境界線。

  • tab.inactiveBackground: 非アクティブタブの背景色。

  • tab.unfocusedInactiveBackground: 非アクティブグループ内の非アクティブタブの背景色。

  • tab.inactiveForeground: アクティブグループ内の非アクティブタブの前景(文字)色。

  • tab.unfocusedActiveForeground: 非アクティブグループ内のアクティブタブの前景(文字)色。

  • tab.unfocusedInactiveForeground: 非アクティブグループ内の非アクティブタブの前景(文字)色。

  • tab.hoverBackground: ホバー時のタブの背景色。

  • tab.unfocusedHoverBackground: 非アクティブグループ内のホバー時のタブの背景色。

  • tab.hoverForeground: ホバー時のタブの前景(文字)色。

  • tab.unfocusedHoverForeground: 非アクティブグループ内のホバー時のタブの前景(文字)色。

  • tab.hoverBorder: ホバー時のタブの境界線色。

  • tab.unfocusedHoverBorder: 非アクティブグループ内のホバー時のタブの境界線色。

  • tab.activeModifiedBorder: アクティブグループ内の変更されたアクティブタブの上部境界線色。

  • tab.inactiveModifiedBorder: アクティブグループ内の変更された非アクティブタブの上部境界線色。

  • tab.unfocusedActiveModifiedBorder: 非アクティブグループ内の変更されたアクティブタブの上部境界線色。

  • tab.unfocusedInactiveModifiedBorder: 非アクティブグループ内の変更された非アクティブタブの上部境界線色。

  • editorPane.background: 中央揃えのエディターレイアウトの左右に見えるエディターペインの背景色。

  • sideBySideEditor.horizontalBorder: 垂直方向に分割されたエディター間の区切り色。

  • sideBySideEditor.verticalBorder: 水平方向に分割されたエディター間の区切り色。

エディターの色

最も目立つエディターの色は、言語文法に基づいたトークン色(構文強調)です。これらはカラーテーマで定義されますが、editor.tokenColorCustomizations 設定でカスタマイズ可能です。

その他のエディター色は以下の通りです

  • editor.background: エディターの背景色。
  • editor.foreground: エディターのデフォルト前景(文字)色。
  • editorLineNumber.foreground: 行番号の色。
  • editorLineNumber.activeForeground: アクティブな行番号の色。
  • editorLineNumber.dimmedForeground: 最終行が非表示(dimmed)設定の時の行番号色。
  • editorCursor.background: エディターカーソルの背景色。
  • editorCursor.foreground: エディターカーソルの色。
  • editorMultiCursor.primary.foreground: 複数カーソル時のプライマリカーソルの色。
  • editorMultiCursor.primary.background: 複数カーソル時のプライマリカーソルの背景色。
  • editorMultiCursor.secondary.foreground: 複数カーソル時のセカンダリカーソルの色。
  • editorMultiCursor.secondary.background: 複数カーソル時のセカンダリカーソルの背景色。
  • editor.placeholder.foreground: エディター内のプレースホルダーテキストの前景(文字)色。
  • editor.compositionBorder: IME 入力(日本語入力など)時の境界線色。

選択範囲の色は、文字を選択した時に表示されます。また、同じ内容を持つすべての領域も強調表示されます。

selection highlight

  • editor.selectionBackground: エディターの選択範囲の色。
  • editor.selectionForeground: ハイコントラスト時の選択テキストの色。
  • editor.inactiveSelectionBackground: 非アクティブなエディター内の選択範囲の色。
  • editor.selectionHighlightBackground: 選択範囲と同じ内容の領域の強調表示色。
  • editor.selectionHighlightBorder: 選択範囲と同じ内容の領域の境界線色。

カーソルがシンボルや単語内にある時に、ワードハイライトが適用されます。ドキュメント内のシンボル言語サポートが利用できない場合は、単語ハイライトにフォールバックします。

occurrences

  • editor.wordHighlightBackground: 読み取りアクセス時のシンボルの背景色。
  • editor.wordHighlightBorder: 読み取りアクセス時のシンボルの境界線色。
  • editor.wordHighlightStrongBackground: 書き込みアクセス時のシンボルの背景色。
  • editor.wordHighlightStrongBorder: 書き込みアクセス時のシンボルの境界線色。
  • editor.wordHighlightTextBackground: テキスト出現時のシンボルの背景色。
  • editor.wordHighlightTextBorder: テキスト出現時のシンボルの境界線色。

検索の色は、検索/置換ダイアログの検索文字列に依存します。

Find matches

  • editor.findMatchBackground: 現在の検索一致の色。
  • editor.findMatchForeground: 現在の検索一致のテキスト色。
  • editor.findMatchHighlightForeground: その他の検索一致の前景(文字)色。
  • editor.findMatchHighlightBackground: その他の検索一致の背景色。
  • editor.findRangeHighlightBackground: 検索範囲を限定した時の強調表示色。
  • editor.findMatchBorder: 現在の検索一致の境界線色。
  • editor.findMatchHighlightBorder: その他の検索一致の境界線色。
  • editor.findRangeHighlightBorder: 検索範囲を限定した時の境界線色。

検索の色は、検索ビューレットのグローバル検索結果で使用されます。

Search Results

  • search.resultsInfoForeground: 検索ビューレットの補完メッセージのテキスト色。

検索エディターの色は、検索エディター内の結果を強調表示します。

Search Editor Matches

  • searchEditor.findMatchBackground: エディター内の検索結果の色。
  • searchEditor.findMatchBorder: エディター内の検索結果の境界線色。
  • searchEditor.textInputBorder: 検索エディターのテキスト入力ボックスの境界線色。

ホバーハイライトは、ホバーが表示されるシンボルの下に表示されます。

Hover Highlight

  • editor.hoverHighlightBackground: ホバーが表示される単語の下の強調表示色。

現在行は通常、背景の強調表示か境界線のいずれかで表示されます。

Line Highlight

  • editor.lineHighlightBackground: カーソル位置の行の強調表示色(背景)。
  • editor.inactiveLineHighlightBackground: エディターが非アクティブな時のカーソル位置の行の強調表示色(背景)。
  • editor.lineHighlightBorder: カーソル位置の行の強調表示色(境界線)。

Unicode ハイライトの色。

  • editorUnicodeHighlight.border: Unicode 文字をハイライトするための境界線色。
  • editorUnicodeHighlight.background: Unicode 文字をハイライトするための背景色。

リンクの色は、リンクをクリックした時に表示されます。

Link

  • editorLink.activeForeground: アクティブなリンクの色。

範囲ハイライトは、検索結果などを選択した時に表示されます。

Range Highlight

  • editor.rangeHighlightBackground: 範囲ハイライトの背景色。
  • editor.rangeHighlightBorder: 範囲ハイライトの境界線色。

シンボルハイライトは、コマンドを使用してシンボルに移動する時に表示されます。

  • editor.symbolHighlightBackground: 強調表示されたシンボルの背景色。
  • editor.symbolHighlightBorder: 強調表示されたシンボルの境界線色。

エディターの空白文字を見るには、空白文字のレンダリングの切り替えを有効にしてください。

  • editorWhitespace.foreground: エディター内の空白文字の色。

インデントガイドを見るには、設定を有効にしてください。

  • editorIndentGuide.background: インデントガイドの色。
  • editorIndentGuide.background1: インデントガイドの色 (1)。
  • editorIndentGuide.background2: インデントガイドの色 (2)。
  • editorIndentGuide.background3: インデントガイドの色 (3)。
  • editorIndentGuide.background4: インデントガイドの色 (4)。
  • editorIndentGuide.background5: インデントガイドの色 (5)。
  • editorIndentGuide.background6: インデントガイドの色 (6)。
  • editorIndentGuide.activeBackground: アクティブなインデントガイドの色。
  • editorIndentGuide.activeBackground1: アクティブなインデントガイドの色 (1)。
  • editorIndentGuide.activeBackground2: アクティブなインデントガイドの色 (2)。
  • editorIndentGuide.activeBackground3: アクティブなインデントガイドの色 (3)。
  • editorIndentGuide.activeBackground4: アクティブなインデントガイドの色 (4)。
  • editorIndentGuide.activeBackground5: アクティブなインデントガイドの色 (5)。
  • editorIndentGuide.activeBackground6: アクティブなインデントガイドの色 (6)。

インラインヒントを表示するには、"editor.inlineSuggest.enabled": true を設定してください。

  • editorInlayHint.background: インラインヒントの背景色。
  • editorInlayHint.foreground: インラインヒントの前景(文字)色。
  • editorInlayHint.typeForeground: 型のインラインヒントの前景(文字)色。
  • editorInlayHint.typeBackground: 型のインラインヒントの背景色。
  • editorInlayHint.parameterForeground: パラメータのインラインヒントの前景(文字)色。
  • editorInlayHint.parameterBackground: パラメータのインラインヒントの背景色。

ルーラーの位置は "editor.rulers" で定義してください。

  • editorRuler.foreground: エディタールーラーの色。

  • editor.linkedEditingBackground: リンクされた編集モード時の背景色。

CodeLens

CodeLens

  • editorCodeLens.foreground: CodeLens の前景(文字)色。

電球

  • editorLightBulb.foreground: 電球アクションアイコンの色。
  • editorLightBulbAutoFix.foreground: 自動修正電球アクションアイコンの色。
  • editorLightBulbAi.foreground: AI 電球アイコンの色。

括弧マッチング

Bracket colors

  • editorBracketMatch.background: 一致する括弧の背後の背景色。
  • editorBracketMatch.border: 一致する括弧の枠線色。
  • editorBracketMatch.foreground: 一致する括弧の前景(文字)色。

括弧のペアの色分け

  • editorBracketHighlight.foreground1: 括弧の色の強調表示 (1)。
  • editorBracketHighlight.foreground2: 括弧の色の強調表示 (2)。
  • editorBracketHighlight.foreground3: 括弧の色の強調表示 (3)。
  • editorBracketHighlight.foreground4: 括弧の色の強調表示 (4)。
  • editorBracketHighlight.foreground5: 括弧の色の強調表示 (5)。
  • editorBracketHighlight.foreground6: 括弧の色の強調表示 (6)。
  • editorBracketHighlight.unexpectedBracket.foreground: 予期しない括弧の前景(文字)色。

括弧ペアガイド

  • editorBracketPairGuide.activeBackground1: アクティブな括弧ペアガイドの背景色 (1)。

  • editorBracketPairGuide.activeBackground2: アクティブな括弧ペアガイドの背景色 (2)。

  • editorBracketPairGuide.activeBackground3: アクティブな括弧ペアガイドの背景色 (3)。

  • editorBracketPairGuide.activeBackground4: アクティブな括弧ペアガイドの背景色 (4)。

  • editorBracketPairGuide.activeBackground5: アクティブな括弧ペアガイドの背景色 (5)。

  • editorBracketPairGuide.activeBackground6: アクティブな括弧ペアガイドの背景色 (6)。

  • editorBracketPairGuide.background1: 非アクティブな括弧ペアガイドの背景色 (1)。

  • editorBracketPairGuide.background2: 非アクティブな括弧ペアガイドの背景色 (2)。

  • editorBracketPairGuide.background3: 非アクティブな括弧ペアガイドの背景色 (3)。

  • editorBracketPairGuide.background4: 非アクティブな括弧ペアガイドの背景色 (4)。

  • editorBracketPairGuide.background5: 非アクティブな括弧ペアガイドの背景色 (5)。

  • editorBracketPairGuide.background6: 非アクティブな括弧ペアガイドの背景色 (6)。

折りたたみ

  • editor.foldBackground: 折り畳まれた範囲の背景色。
  • editor.foldPlaceholderForeground: 折り畳まれた後のテキストの色。

オーバービュールーラー

エディター右端のスクロールバーの下にあり、デコレーションの全体像を表示します。

  • editorOverviewRuler.background: オーバービュールーラーの背景色。
  • editorOverviewRuler.border: オーバービュールーラーの境界線色。
  • editorOverviewRuler.findMatchForeground: 検索一致のオーバービュールーラーマーカー色。
  • editorOverviewRuler.rangeHighlightForeground: 範囲ハイライトのオーバービュールーラーマーカー色。
  • editorOverviewRuler.selectionHighlightForeground: 選択ハイライトのオーバービュールーラーマーカー色。
  • editorOverviewRuler.wordHighlightForeground: シンボルハイライトのオーバービュールーラーマーカー色。
  • editorOverviewRuler.wordHighlightStrongForeground: 書き込みシンボルハイライトのオーバービュールーラーマーカー色。
  • editorOverviewRuler.wordHighlightTextForeground: テキスト出現ハイライトのオーバービュールーラーマーカー色。
  • editorOverviewRuler.modifiedForeground: 変更されたコンテンツのオーバービュールーラーマーカー色。
  • editorOverviewRuler.addedForeground: 追加されたコンテンツのオーバービュールーラーマーカー色。
  • editorOverviewRuler.deletedForeground: 削除されたコンテンツのオーバービュールーラーマーカー色。
  • editorOverviewRuler.errorForeground: エラー用オーバービュールーラーマーカー色。
  • editorOverviewRuler.warningForeground: 警告用オーバービュールーラーマーカー色。
  • editorOverviewRuler.infoForeground: 情報用オーバービュールーラーマーカー色。
  • editorOverviewRuler.bracketMatchForeground: 括弧マッチング用オーバービュールーラーマーカー色。
  • editorOverviewRuler.inlineChatInserted: インラインチャット挿入分用オーバービュールーラーマーカー色。
  • editorOverviewRuler.inlineChatRemoved: インラインチャット削除分用オーバービュールーラーマーカー色。
  • editorOverviewRuler.commentDraftForeground: ドラフトコメントがあるコメントスレッド用オーバービュールーラーマーカー色。

エラーと警告

  • editorError.foreground: エラー波線の前景(文字)色。
  • editorError.border: エラーボックスの境界線色。
  • editorError.background: エラーテキストの背景色。
  • editorWarning.foreground: 警告波線の前景(文字)色。
  • editorWarning.border: 警告ボックスの境界線色。
  • editorWarning.background: 警告テキストの背景色。
  • editorInfo.foreground: 情報波線の前景(文字)色。
  • editorInfo.border: 情報ボックスの境界線色。
  • editorInfo.background: 情報テキストの背景色。
  • editorHint.foreground: ヒントの前景(文字)色。
  • editorHint.border: ヒントボックスの境界線色。
  • problemsErrorIcon.foreground: 問題のエラーアイコンの色。
  • problemsWarningIcon.foreground: 問題の警告アイコンの色。
  • problemsInfoIcon.foreground: 問題の情報アイコンの色。

未使用のソースコード

  • editorUnnecessaryCode.border: 未使用ソースコードの境界線色。
  • editorUnnecessaryCode.opacity: 未使用ソースコードの不透明度。

ガターにはグリフマージンと行番号が含まれます

  • editorGutter.background: エディターガターの背景色。
  • editorGutter.modifiedBackground: 変更された行のガターの背景色。
  • editorGutter.modifiedSecondaryBackground: 変更された行のガターのセカンダリ背景色。
  • editorGutter.addedBackground: 追加された行のガターの背景色。
  • editorGutter.addedSecondaryBackground: 追加された行のガターのセカンダリ背景色。
  • editorGutter.deletedBackground: 削除された行のガターの背景色。
  • editorGutter.deletedSecondaryBackground: 削除された行のガターのセカンダリ背景色。
  • editorGutter.commentRangeForeground: コメント範囲用ガターデコレーション色。
  • editorGutter.commentGlyphForeground: コメントグリフ用ガターデコレーション色。
  • editorGutter.commentUnresolvedGlyphForeground: 未解決のコメントスレッドのコメントグリフ用ガターデコレーション色。
  • editorGutter.foldingControlForeground: 折り畳みコントロールのガター色。
  • editorGutter.itemGlyphForeground: ガターアイテムグリフ用デコレーション色。
  • editorGutter.itemBackground: ガターアイテムの背景用デコレーション色。
  • editorGutter.commentDraftGlyphForeground: ドラフトコメント用コメントグリフのガターデコレーション色。

コメントウィジェットはプルリクエストのレビュー時に表示されます

  • editorCommentsWidget.resolvedBorder: 解決済みコメントの境界線色。
  • editorCommentsWidget.unresolvedBorder: 未解決コメントの境界線色。
  • editorCommentsWidget.rangeBackground: コメント範囲の背景色。
  • editorCommentsWidget.rangeActiveBackground: アクティブなコメント範囲の背景色。
  • editorCommentsWidget.replyInputBackground: 返信入力ボックスの背景色。

インライン編集は GitHub Copilot による提案時などに表示されます

  • inlineEdit.gutterIndicator.primaryBorder: プライマリインライン編集ガターインジケーターの境界線色。
  • inlineEdit.gutterIndicator.primaryForeground: プライマリインライン編集ガターインジケーターの前景(文字)色。
  • inlineEdit.gutterIndicator.primaryBackground: プライマリインライン編集ガターインジケーターの背景色。
  • inlineEdit.gutterIndicator.secondaryBorder: セカンダリインライン編集ガターインジケーターの境界線色。
  • inlineEdit.gutterIndicator.secondaryForeground: セカンダリインライン編集ガターインジケーターの前景(文字)色。
  • inlineEdit.gutterIndicator.secondaryBackground: セカンダリインライン編集ガターインジケーターの背景色。
  • inlineEdit.gutterIndicator.successfulBorder: 成功したインライン編集ガターインジケーターの境界線色。
  • inlineEdit.gutterIndicator.successfulForeground: 成功したインライン編集ガターインジケーターの前景(文字)色。
  • inlineEdit.gutterIndicator.successfulBackground: 成功したインライン編集ガターインジケーターの背景色。
  • inlineEdit.gutterIndicator.background: インライン編集ガターインジケーターの背景色。
  • inlineEdit.originalBackground: インライン編集の元のテキストの背景色。
  • inlineEdit.modifiedBackground: インライン編集の変更後テキストの背景色。
  • inlineEdit.originalChangedLineBackground: 元のテキストの変更行の背景色。
  • inlineEdit.originalChangedTextBackground: 元のテキストの変更テキストのオーバーレイ色。
  • inlineEdit.modifiedChangedLineBackground: 変更後テキストの変更行の背景色。
  • inlineEdit.modifiedChangedTextBackground: 変更後テキストの変更テキストのオーバーレイ色。
  • inlineEdit.originalBorder: インライン編集の元のテキストの境界線色。
  • inlineEdit.modifiedBorder: インライン編集の変更後テキストの境界線色。
  • inlineEdit.tabWillAcceptModifiedBorder: タブによる適用時の変更後テキストの境界線色。
  • inlineEdit.tabWillAcceptOriginalBorder: タブによる適用時の元のテキストの境界線色。

Diff エディターの色

挿入および削除されたテキストには、背景または境界線のいずれかを使用してください。

  • diffEditor.insertedTextBackground: 挿入されたテキストの背景色。
  • diffEditor.insertedTextBorder: 挿入されたテキストの境界線色。
  • diffEditor.removedTextBackground: 削除されたテキストの背景色。
  • diffEditor.removedTextBorder: 削除されたテキストの境界線色。
  • diffEditor.border: エディター間の境界線色。
  • diffEditor.diagonalFill: Side-by-Side 比較表示時の対角線の塗りつぶし色。
  • diffEditor.insertedLineBackground: 挿入された行の背景色。
  • diffEditor.removedLineBackground: 削除された行の背景色。
  • diffEditorGutter.insertedLineBackground: 挿入された行のガター背景色。
  • diffEditorGutter.removedLineBackground: 削除された行のガター背景色。
  • diffEditorOverview.insertedForeground: 挿入されたコンテンツの Diff オーバービューマーカー色。
  • diffEditorOverview.removedForeground: 削除されたコンテンツの Diff オーバービューマーカー色。
  • diffEditor.unchangedRegionBackground: 変更されていない領域の背景色。
  • diffEditor.unchangedRegionForeground: 変更されていない領域の前景(文字)色。
  • diffEditor.unchangedRegionShadow: 変更されていない領域ウィジェットの影の色。
  • diffEditor.unchangedCodeBackground: 変更されていないコードの背景色。
  • diffEditor.move.border: 移動されたテキストの境界線色。
  • diffEditor.moveActive.border: 移動されたテキストのアクティブな境界線色。
  • multiDiffEditor.headerBackground: 複数ファイル比較エディターヘッダーの背景色。
  • multiDiffEditor.background: 複数ファイル比較エディターの背景色。
  • multiDiffEditor.border: 複数ファイル比較エディターの境界線色。

チャットの色

  • chat.requestBorder: チャットリクエストの境界線色。
  • chat.requestBackground: チャットリクエストの背景色。
  • chat.slashCommandBackground: チャットスラッシュコマンドの背景色。
  • chat.slashCommandForeground: チャットスラッシュコマンドの前景(文字)色。
  • chat.avatarBackground: チャットアバターの背景色。
  • chat.avatarForeground: チャットアバターの前景(文字)色。
  • chat.editedFileForeground: チャット内の編集済みファイルの前景(文字)色。
  • chat.linesAddedForeground: 追加行の前景(文字)色。
  • chat.linesRemovedForeground: 削除行の前景(文字)色。
  • chat.requestCodeBorder: チャットリクエスト内のコードブロック境界線色。
  • chat.requestBubbleBackground: チャットリクエストバブルの背景色。
  • chat.requestBubbleHoverBackground: ホバー時のチャットリクエストバブルの背景色。
  • chat.checkpointSeparator: チェックポイント区切り線色。
  • chat.thinkingShimmer: 思考中ラベルのきらめき強調表示色。
  • chatManagement.sashBorder: チャット管理分割ビューの境界線色。

インラインチャットの色

  • inlineChat.background: インタラクティブエディターウィジェットの背景色。
  • inlineChat.foreground: インタラクティブエディターウィジェットの前景(文字)色。
  • inlineChat.border: インタラクティブエディターウィジェットの境界線色。
  • inlineChat.shadow: インタラクティブエディターウィジェットの影の色。
  • inlineChatInput.border: インタラクティブエディター入力の境界線色。
  • inlineChatInput.focusBorder: フォーカス時のインタラクティブエディター入力の境界線色。
  • inlineChatInput.placeholderForeground: 入力プレースホルダーの前景(文字)色。
  • inlineChatInput.background: 入力の背景色。
  • inlineChatDiff.inserted: インタラクティブエディター入力内の挿入テキスト背景色。
  • inlineChatDiff.removed: インタラクティブエディター入力内の削除テキスト背景色。

パネルチャットの色

  • interactive.activeCodeBorder: フォーカス時のインタラクティブコードセルの境界線色。
  • interactive.inactiveCodeBorder: フォーカスがない時のインタラクティブコードセルの境界線色。

エディターウィジェットの色

エディターウィジェットはエディターコンテンツの前面に表示されます。

  • editorWidget.foreground: エディターウィジェットの前景(文字)色。

  • editorWidget.background: エディターウィジェットの背景色。

  • editorWidget.border: エディターウィジェットの境界線色。

  • editorWidget.resizeBorder: エディターウィジェットのリサイズバー境界線色。

  • editorSuggestWidget.background: 提案ウィジェットの背景色。

  • editorSuggestWidget.border: 提案ウィジェットの境界線色。

  • editorSuggestWidget.foreground: 提案ウィジェットの前景(文字)色。

  • editorSuggestWidget.focusHighlightForeground: 項目がフォーカスされた時の強調表示色。

  • editorSuggestWidget.highlightForeground: 提案ウィジェットの強調表示色。

  • editorSuggestWidget.selectedBackground: 選択された項目の背景色。

  • editorSuggestWidget.selectedForeground: 選択された項目の前景(文字)色。

  • editorSuggestWidget.selectedIconForeground: 選択された項目のアイコン前景(文字)色。

  • editorSuggestWidgetStatus.foreground: ステータスの前景(文字)色。

  • editorHoverWidget.foreground: エディターホバーの前景(文字)色。

  • editorHoverWidget.background: エディターホバーの背景色。

  • editorHoverWidget.border: エディターホバーの境界線色。

  • editorHoverWidget.highlightForeground: パラメータヒント内のアクティブ項目の前景(文字)色。

  • editorHoverWidget.statusBarBackground: エディターホバーステータスバーの背景色。

  • editorGhostText.border: インライン補完のゴーストテキストの境界線色。

  • editorGhostText.background: ゴーストテキストの背景色。

  • editorGhostText.foreground: ゴーストテキストの前景(文字)色。

  • editorStickyScroll.background: エディタースティッキースクロールの背景色。

  • editorStickyScroll.border: エディタースティッキースクロールの境界線色。

  • editorStickyScroll.shadow: エディタースティッキースクロールの影の色。

  • editorStickyScrollGutter.background: スティッキースクロールガターの背景色。

  • editorStickyScrollHover.background: スティッキースクロールのホバー時背景色。

デバッグ例外ウィジェットは、例外発生時に表示されるピークビューです。

  • debugExceptionWidget.background: 例外ウィジェットの背景色。
  • debugExceptionWidget.border: 例外ウィジェットの境界線色。

マーカーナビゲーションビューは、エラーや警告への移動時に表示されます。

  • editorMarkerNavigation.background: マーカーナビゲーションの背景色。
  • editorMarkerNavigationError.background: マーカーナビゲーションエラーの色。
  • editorMarkerNavigationWarning.background: マーカーナビゲーション警告の色。
  • editorMarkerNavigationInfo.background: マーカーナビゲーション情報の色。
  • editorMarkerNavigationError.headerBackground: エラー見出しの背景色。
  • editorMarkerNavigationWarning.headerBackground: 警告見出しの背景色。
  • editorMarkerNavigationInfo.headerBackground: 情報見出しの背景色。

ピークビューの色

ピークビューは、エディター内で定義や参照を表示するために使用されます。

Peek view

  • 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: タイトルの前景(文字)色。
  • peekViewEditorStickyScroll.background: ピークビュー内のスティッキースクロール背景色。
  • peekViewEditorStickyScrollGutter.background: ピークビュー内のスティッキースクロールガター背景色。

マージ競合の色

マージ競合デコレーションは、特殊な Diff 範囲がある時に表示されます。

Merge ranges

  • merge.currentHeaderBackground: 現在のヘッダー背景色。
  • merge.currentContentBackground: 現在のコンテンツ背景色。
  • merge.incomingHeaderBackground: 受信ヘッダー背景色。
  • merge.incomingContentBackground: 受信コンテンツ背景色。
  • merge.border: マージ競合の境界線色。
  • merge.commonContentBackground: 共通の先祖のコンテンツ背景色。
  • merge.commonHeaderBackground: 共通の先祖のヘッダー背景色。
  • editorOverviewRuler.currentContentForeground: 現在のコンテンツのオーバービューマーカー色。
  • editorOverviewRuler.incomingContentForeground: 受信コンテンツのオーバービューマーカー色。
  • editorOverviewRuler.commonContentForeground: 共通コンテンツのオーバービューマーカー色。
  • editorOverviewRuler.commentForeground: 解決済みコメントのオーバービューマーカー色。
  • editorOverviewRuler.commentUnresolvedForeground: 未解決コメントのオーバービューマーカー色。
  • mergeEditor.change.background: 変更の背景色。
  • mergeEditor.change.word.background: 単語変更の背景色。
  • mergeEditor.conflict.unhandledUnfocused.border: 未処理の非フォーカス競合の境界線色。
  • mergeEditor.conflict.unhandledFocused.border: 未処理のフォーカス競合の境界線色。
  • mergeEditor.conflict.handledUnfocused.border: 処理済み非フォーカス競合の境界線色。
  • mergeEditor.conflict.handledFocused.border: 処理済みフォーカス競合の境界線色。
  • mergeEditor.conflict.handled.minimapOverViewRuler: 入力 1 の変更オーバービューマーカー色。
  • mergeEditor.conflict.unhandled.minimapOverViewRuler: 入力 1 の変更オーバービューマーカー色。
  • mergeEditor.conflictingLines.background: 「競合する行」テキストの背景。
  • mergeEditor.changeBase.background: ベースの変更背景色。
  • mergeEditor.changeBase.word.background: ベースの単語変更背景色。
  • mergeEditor.conflict.input1.background: 入力 1 デコレーションの背景色。
  • mergeEditor.conflict.input2.background: 入力 2 デコレーションの背景色。

パネルの色

パネルはエディター下部に表示され、出力や統合ターミナルなどが含まれます。

  • panel.background: パネルの背景色。
  • panel.border: パネルの境界線色。
  • panel.dropBorder: パネルタイトルのドラッグ&ドロップフィードバック色。
  • panelTitle.activeBorder: アクティブなパネルタイトルの境界線色。
  • panelTitle.activeForeground: アクティブなパネルタイトルの前景(文字)色。
  • panelTitle.inactiveForeground: 非アクティブなパネルタイトルの前景(文字)色。
  • panelTitle.border: パネル下の境界線色。
  • panelTitleBadge.background: パネルタイトルバッジの背景色。
  • panelTitleBadge.foreground: パネルタイトルバッジの前景(文字)色。
  • panelInput.border: パネル内入力ボックスの境界線色。
  • panelSection.border: パネルセクションの境界線色。
  • panelSection.dropBackground: パネルセクションのドラッグ&ドロップフィードバック色。
  • panelSectionHeader.background: パネルセクションヘッダーの背景色。
  • panelSectionHeader.foreground: パネルセクションヘッダーの前景(文字)色。
  • panelStickyScroll.background: パネル内のスティッキースクロール背景色。
  • panelStickyScroll.border: パネル内のスティッキースクロール境界線色。
  • panelStickyScroll.shadow: パネル内のスティッキースクロールの影の色。
  • panelSectionHeader.border: パネルセクションヘッダーの境界線色。
  • outputView.background: 出力ビューの背景色。
  • outputViewStickyScroll.background: 出力ビューのスティッキースクロール背景色。

ステータスバーの色

ステータスバーはワークベンチの最下部に表示されます。

  • statusBar.background: 標準ステータスバーの背景色。
  • statusBar.foreground: ステータスバーの前景(文字)色。
  • statusBar.border: ステータスバーの境界線色。
  • statusBar.debuggingBackground: デバッグ中のステータスバー背景色。
  • statusBar.debuggingForeground: デバッグ中のステータスバー前景(文字)色。
  • statusBar.debuggingBorder: デバッグ中のステータスバー境界線色。
  • statusBar.noFolderForeground: フォルダー未オープン時のステータスバー前景(文字)色。
  • statusBar.noFolderBackground: フォルダー未オープン時のステータスバー背景色。
  • statusBar.noFolderBorder: フォルダー未オープン時のステータスバー境界線色。
  • statusBarItem.activeBackground: クリック時のステータスバー項目背景色。
  • statusBarItem.hoverForeground: ホバー時のステータスバー項目前景(文字)色。
  • statusBarItem.hoverBackground: ホバー時のステータスバー項目背景色。
  • statusBarItem.prominentForeground: 重要項目の前景(文字)色。
  • statusBarItem.prominentBackground: 重要項目の背景色。
  • statusBarItem.prominentHoverForeground: ホバー時の重要項目前景(文字)色。
  • statusBarItem.prominentHoverBackground: ホバー時の重要項目背景色。
  • statusBarItem.remoteBackground: リモートインジケーターの背景色。
  • statusBarItem.remoteForeground: リモートインジケーターの前景(文字)色。
  • statusBarItem.remoteHoverBackground: ホバー時のリモートインジケーター背景色。
  • statusBarItem.remoteHoverForeground: ホバー時のリモートインジケーター前景(文字)色。
  • statusBarItem.errorBackground: エラー項目の背景色。
  • statusBarItem.errorForeground: エラー項目の前景(文字)色。
  • statusBarItem.errorHoverBackground: ホバー時のエラー項目背景色。
  • statusBarItem.errorHoverForeground: ホバー時のエラー項目前景(文字)色。
  • statusBarItem.warningBackground: 警告項目の背景色。
  • statusBarItem.warningForeground: 警告項目の前景(文字)色。
  • statusBarItem.warningHoverBackground: ホバー時の警告項目背景色。
  • statusBarItem.warningHoverForeground: ホバー時の警告項目前景(文字)色。
  • statusBarItem.compactHoverBackground: 二重ホバーが含まれる時の背景色。
  • statusBarItem.focusBorder: キーボードナビゲーション時の項目境界線色。
  • statusBar.focusBorder: キーボードナビゲーション時のバー境界線色。
  • statusBarItem.offlineBackground: オフライン時のステータスバー項目背景色。
  • statusBarItem.offlineForeground: オフライン時のステータスバー項目前景(文字)色。
  • statusBarItem.offlineHoverForeground: ホバー時のオフライン時前景(文字)色。
  • statusBarItem.offlineHoverBackground: ホバー時のオフライン時背景色。

重要な項目は他のステータスバーエントリと区別されます。

タイトルバーの色

  • titleBar.activeBackground: アクティブウィンドウ時のタイトルバー背景色。
  • titleBar.activeForeground: アクティブウィンドウ時のタイトルバー前景(文字)色。
  • titleBar.inactiveBackground: 非アクティブウィンドウ時のタイトルバー背景色。
  • titleBar.inactiveForeground: 非アクティブウィンドウ時のタイトルバー前景(文字)色。
  • titleBar.border: タイトルバーの境界線色。
  • menubar.selectionForeground: メニューバーの選択項目前景(文字)色。
  • menubar.selectionBackground: メニューバーの選択項目背景色。
  • menubar.selectionBorder: メニューバーの選択されたメニュー項目の境界線の色。
  • menu.foreground: メニュー項目の前景色。
  • menu.background: メニュー項目の背景色。
  • menu.selectionForeground: メニュー内で選択されたメニュー項目の前景色。
  • menu.selectionBackground: メニュー内で選択されたメニュー項目の背景色。
  • menu.selectionBorder: メニュー内で選択されたメニュー項目の境界線の色。
  • menu.separatorBackground: メニュー内のセパレーター項目の色。
  • menu.border: メニューの境界線の色。

コマンドセンターの色

  • commandCenter.foreground: コマンドセンターの前景色。
  • commandCenter.activeForeground: コマンドセンターがアクティブな時の前景色。
  • commandCenter.background: コマンドセンターの背景色。
  • commandCenter.activeBackground: コマンドセンターがアクティブな時の背景色。
  • commandCenter.border: コマンドセンターの境界線の色。
  • commandCenter.inactiveForeground: ウィンドウが非アクティブな時のコマンドセンターの前景色。
  • commandCenter.inactiveBorder: ウィンドウが非アクティブな時のコマンドセンターの境界線の色。
  • commandCenter.activeBorder: コマンドセンターがアクティブな時の境界線の色。
  • commandCenter.debuggingBackground: プログラムをデバッグしている時のコマンドセンターの背景色。

通知の色

通知トーストはワークベンチの右下からスライドアップして表示されます。

Notification Toasts

通知センターで開くと、ヘッダー付きのリストで表示されます。

Notification Center

  • notificationCenter.border: 通知センターの境界線の色。
  • notificationCenterHeader.foreground: 通知センターヘッダーの前景色。
  • notificationCenterHeader.background: 通知センターヘッダーの背景色。
  • notificationToast.border: 通知トーストの境界線の色。
  • notifications.foreground: 通知の前景色。
  • notifications.background: 通知の背景色。
  • notifications.border: 通知センター内の他の通知と区別するための通知境界線の色。
  • notificationLink.foreground: 通知内のリンクの前景色。
  • notificationsErrorIcon.foreground: 通知のエラーアイコンに使用される色。
  • notificationsWarningIcon.foreground: 通知の警告アイコンに使用される色。
  • notificationsInfoIcon.foreground: 通知の情報アイコンに使用される色。

バナーはタイトルバーの下に表示され、表示時はワークベンチの幅全体に広がります。

  • banner.background: バナーの背景色。
  • banner.foreground: バナーの前景色。
  • banner.iconForeground: バナーテキストの前にあるアイコンの色。

拡張機能の色

  • extensionButton.prominentForeground: 拡張機能ビューのボタンの前景色(例: インストールボタン)。
  • extensionButton.prominentBackground: 拡張機能ビューのボタンの背景色。
  • extensionButton.prominentHoverBackground: 拡張機能ビューのボタンのホバー時の背景色。
  • extensionButton.background: 拡張機能操作用のボタンの背景色。
  • extensionButton.foreground: 拡張機能操作用のボタンの前景色。
  • extensionButton.hoverBackground: 拡張機能操作用のボタンのホバー時の背景色。
  • extensionButton.separator: 拡張機能操作用のボタンのセパレーターの色。
  • extensionButton.border: 拡張機能操作用のボタンの境界線の色。
  • extensionBadge.remoteBackground: 拡張機能ビューのリモートバッジの背景色。
  • extensionBadge.remoteForeground: 拡張機能ビューのリモートバッジの前景色。
  • extensionIcon.starForeground: 拡張機能評価のアイコンの色。
  • extensionIcon.verifiedForeground: 拡張機能の認定済み発行者のアイコンの色。
  • extensionIcon.preReleaseForeground: プレリリース拡張機能のアイコンの色。
  • extensionIcon.sponsorForeground: 拡張機能のスポンサーアイコンの色。
  • extensionIcon.privateForeground: プライベート拡張機能のアイコンの色。
  • mcpIcon.starForeground: MCPスター付きアイコンの色。

クイックピッカーの色

  • pickerGroup.border: クイックピッカー(クイックオープン)のグループ化境界線の色。
  • pickerGroup.foreground: クイックピッカー(クイックオープン)のグループ化ラベルの色。
  • quickInput.background: クイック入力の背景色。クイック入力ウィジェットは、カラーテーマピッカーなどのビューのコンテナです。
  • quickInput.foreground: クイック入力の前景色。クイック入力ウィジェットは、カラーテーマピッカーなどのビューのコンテナです。
  • quickInputList.focusBackground: クイックピッカーでフォーカスされた項目の背景色。
  • quickInputList.focusForeground: クイックピッカーでフォーカスされた項目の前景色。
  • quickInputList.focusIconForeground: クイックピッカーでフォーカスされた項目のアイコン前景色。
  • quickInputTitle.background: クイックピッカーのタイトルの背景色。クイックピッカーウィジェットは、コマンドパレットなどのピッカーのコンテナです。

キーバインドラベルの色

キーバインドラベルは、コマンドにキーバインドが関連付けられている場合に表示されます。キーバインドラベルの例は、コマンドパレットで確認できます。

Keybinding label

キーバインドラベルの使用例は以下などがあります(これらに限定されません)

  • コマンドパレット
  • キーボードショートカットエディター
  • キーボードショートカットレコーダーのモーダル
  • 拡張機能のマーケットプレイスページの「機能の貢献」セクション

以下のカスタマイズが可能です

  • keybindingLabel.background: キーバインドラベルの背景色。キーバインドラベルは、キーボードショートカットを表すために使用されます。
  • keybindingLabel.foreground: キーバインドラベルの前景色。キーバインドラベルは、キーボードショートカットを表すために使用されます。
  • keybindingLabel.border: キーバインドラベルの境界線の色。キーバインドラベルは、キーボードショートカットを表すために使用されます。
  • keybindingLabel.bottomBorder: キーバインドラベルの下側の境界線の色。キーバインドラベルは、キーボードショートカットを表すために使用されます。

キーボードショートカットテーブルの色

  • keybindingTable.headerBackground: キーボードショートカットテーブルのヘッダーの背景色。
  • keybindingTable.rowsBackground: キーボードショートカットテーブルの交互の行の背景色。

統合ターミナルの色

  • terminal.background: 統合ターミナルのビューポートの背景色。

  • terminal.border: ターミナル内の分割ペインを区切る境界線の色。デフォルトは panel.border です。

  • terminal.foreground: 統合ターミナルのデフォルトの前景色。

  • terminal.ansiBlack: ターミナルの ANSI 'Black' カラー。

  • terminal.ansiBlue: ターミナルの ANSI 'Blue' カラー。

  • terminal.ansiBrightBlack: ターミナルの ANSI 'BrightBlack' カラー。

  • terminal.ansiBrightBlue: ターミナルの ANSI 'BrightBlue' カラー。

  • terminal.ansiBrightCyan: ターミナルの ANSI 'BrightCyan' カラー。

  • terminal.ansiBrightGreen: ターミナルの ANSI 'BrightGreen' カラー。

  • terminal.ansiBrightMagenta: ターミナルの ANSI 'BrightMagenta' カラー。

  • terminal.ansiBrightRed: ターミナルの ANSI 'BrightRed' カラー。

  • terminal.ansiBrightWhite: ターミナルの ANSI 'BrightWhite' カラー。

  • terminal.ansiBrightYellow: ターミナルの ANSI 'BrightYellow' カラー。

  • terminal.ansiCyan: ターミナルの ANSI 'Cyan' カラー。

  • terminal.ansiGreen: ターミナルの ANSI 'Green' カラー。

  • terminal.ansiMagenta: ターミナルの ANSI 'Magenta' カラー。

  • terminal.ansiRed: ターミナルの ANSI 'Red' カラー。

  • terminal.ansiWhite: ターミナルの ANSI 'White' カラー。

  • terminal.ansiYellow: ターミナルの ANSI 'Yellow' カラー。

  • terminal.selectionBackground: ターミナルの選択範囲の背景色。

  • terminal.selectionForeground: ターミナルの選択範囲の前景色。これが null の場合、選択範囲の前景色は保持され、最小コントラスト比機能が適用されます。

  • terminal.inactiveSelectionBackground: フォーカスがない時のターミナルの選択範囲の背景色。

  • terminal.findMatchBackground: ターミナル内の現在の検索一致の色。背後のターミナルコンテンツを隠さないよう、不透明であってはなりません。

  • terminal.findMatchBorder: ターミナル内の現在の検索一致の境界線の色。

  • terminal.findMatchHighlightBackground: ターミナル内の他の検索一致の色。背後のターミナルコンテンツを隠さないよう、不透明であってはなりません。

  • terminal.findMatchHighlightBorder: ターミナル内の他の検索一致の境界線の色。

  • terminal.hoverHighlightBackground: ターミナル内でリンクにホバーした時のハイライトの色。

  • terminalCursor.background: ターミナルカーソルの背景色。ブロックカーソルと重なる文字の色をカスタマイズできます。

  • terminalCursor.foreground: ターミナルカーソルの前景色。

  • terminal.dropBackground: ターミナル上でドラッグしている時の背景色。ターミナルの内容が透けて見えるように透過性を持たせる必要があります。

  • terminal.tab.activeBorder: パネル内のターミナルタブの側面にある境界線。デフォルトは tab.activeBorder です。

  • terminalCommandDecoration.defaultBackground: デフォルトのターミナルコマンド装飾の背景色。

  • terminalCommandDecoration.successBackground: 成功したコマンドのターミナルコマンド装飾の背景色。

  • terminalCommandDecoration.errorBackground: エラーとなったコマンドのターミナルコマンド装飾の背景色。

  • terminalOverviewRuler.cursorForeground: オーバービュールーラーのカーソルの色。

  • terminalOverviewRuler.findMatchForeground: ターミナル内の検索一致に対するオーバービュールーラーのマーカーの色。

  • terminalStickyScroll.background: ターミナル内のスティッキースクロールオーバーレイの背景色。

  • terminalStickyScroll.border: ターミナル内のスティッキースクロールオーバーレイの境界線。

  • terminalStickyScrollHover.background: ターミナル内のスティッキースクロールオーバーレイにホバーした時の背景色。

  • terminal.initialHintForeground: ターミナルの初期ヒントの前景色。

  • terminalOverviewRuler.border: オーバービュールーラー左側の境界線の色。

  • terminalCommandGuide.foreground: ホバー時にコマンドとその出力の左側に表示されるターミナルコマンドガイドの前景色。

  • terminalSymbolIcon.aliasForeground: エイリアスアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.branchForeground: ブランチアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.commitForeground: コミットアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.flagForeground: フラグアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.optionForeground: オプションアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.optionValueForeground: 列挙型メンバーアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.methodForeground: メソッドアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.argumentForeground: 引数アイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.inlineSuggestionForeground: インラインサジェストアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.fileForeground: ファイルアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.folderForeground: フォルダーアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.pullRequestDoneForeground: 完了したプルリクエストアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.pullRequestForeground: プルリクエストアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.remoteForeground: リモートアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.stashForeground: スタッシュアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.symbolText: プレーンテキストサジェストの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.symbolicLinkFileForeground: シンボリックリンクファイルアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.symbolicLinkFolderForeground: シンボリックリンクフォルダーアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

  • terminalSymbolIcon.tagForeground: タグアイコンの前景色。これらのアイコンはターミナルの提案ウィジェットに表示されます。

デバッグの色

  • debugToolBar.background: デバッグツールバーの背景色。
  • debugToolBar.border: デバッグツールバーの境界線の色。
  • editor.stackFrameHighlightBackground: エディター内で一番上のスタックフレームハイライトの背景色。
  • editor.focusedStackFrameHighlightBackground: エディター内でフォーカスされたスタックフレームハイライトの背景色。
  • editor.inlineValuesForeground: デバッグインライン値テキストの色。
  • editor.inlineValuesBackground: デバッグインライン値背景の色。
  • debugView.exceptionLabelForeground: デバッガーが例外で停止した時に CALL STACK ビューに表示されるラベルの前景色。
  • debugView.exceptionLabelBackground: デバッガーが例外で停止した時に CALL STACK ビューに表示されるラベルの背景色。
  • debugView.stateLabelForeground: 現在のセッションまたはスレッドの状態を示す CALL STACK ビュー内のラベルの前景色。
  • debugView.stateLabelBackground: 現在のセッションまたはスレッドの状態を示す CALL STACK ビュー内のラベルの背景色。
  • debugView.valueChangedHighlight: デバッグビュー(変数ビューなど)での値の変更をハイライトするために使用される色。
  • debugTokenExpression.name: デバッグビュー(変数ビューやウォッチビューなど)に表示されるトークン名の前景色。
  • debugTokenExpression.value: デバッグビューに表示されるトークン値の前景色。
  • debugTokenExpression.string: デバッグビュー内の文字列の前景色。
  • debugTokenExpression.boolean: デバッグビュー内のブール値の前景色。
  • debugTokenExpression.number: デバッグビュー内の数値の前景色。
  • debugTokenExpression.error: デバッグビュー内の式エラーの前景色。
  • debugTokenExpression.type: デバッグビュー(変数ビューやウォッチビューなど)に表示されるトークン型の前景色。

テストの色

  • testing.runAction: エディター内の「実行」アイコンの色。
  • testing.iconErrored: テストエクスプローラーの「エラー」アイコンの色。
  • testing.iconFailed: テストエクスプローラーの「失敗」アイコンの色。
  • testing.iconPassed: テストエクスプローラーの「成功」アイコンの色。
  • testing.iconQueued: テストエクスプローラーの「キュー」アイコンの色。
  • testing.iconUnset: テストエクスプローラーの「未設定」アイコンの色。
  • testing.iconSkipped: テストエクスプローラーの「スキップ」アイコンの色。
  • testing.iconErrored.retired: テストエクスプローラーの「エラー」アイコンの非アクティブ時の色。
  • testing.iconFailed.retired: テストエクスプローラーの「失敗」アイコンの非アクティブ時の色。
  • testing.iconPassed.retired: テストエクスプローラーの「成功」アイコンの非アクティブ時の色。
  • testing.iconQueued.retired: テストエクスプローラーの「キュー」アイコンの非アクティブ時の色。
  • testing.iconUnset.retired: テストエクスプローラーの「未設定」アイコンの非アクティブ時の色。
  • testing.iconSkipped.retired: テストエクスプローラーの「スキップ」アイコンの非アクティブ時の色。
  • testing.peekBorder: ピークビューの境界線と矢印の色。
  • testing.peekHeaderBackground: ピークビューの境界線と矢印の色。
  • testing.message.error.lineBackground: エディター内でインライン表示されるエラーメッセージの横の余白の色。
  • testing.message.info.decorationForeground: エディター内でインライン表示されるテスト情報メッセージのテキスト色。
  • testing.message.info.lineBackground: エディター内でインライン表示される情報メッセージの横の余白の色。
  • testing.messagePeekBorder: ログメッセージをピーク表示する際のピークビューの境界線と矢印の色。
  • testing.messagePeekHeaderBackground: ログメッセージをピーク表示する際のピークビューの境界線と矢印の色。
  • testing.coveredBackground: カバーされたコードの背景色。
  • testing.coveredBorder: カバーされたコードの境界線の色。
  • testing.coveredGutterBackground: コードがカバーされた領域のガターの色。
  • testing.uncoveredBranchBackground: カバーされていないブランチに対して表示されるウィジェットの背景。
  • testing.uncoveredBackground: カバーされていないテキストの背景色。
  • testing.uncoveredBorder: カバーされていないテキストの境界線の色。
  • testing.uncoveredGutterBackground: コードがカバーされていない領域のガターの色。
  • testing.coverCountBadgeBackground: 実行回数を示すバッジの背景色。
  • testing.coverCountBadgeForeground: 実行回数を示すバッジの前景色。
  • testing.message.error.badgeBackground: エディター内でインライン表示されるテストエラーメッセージの背景色。
  • testing.message.error.badgeBorder: エディター内でインライン表示されるテストエラーメッセージの境界線の色。
  • testing.message.error.badgeForeground: エディター内でインライン表示されるテストエラーメッセージのテキスト色。

ウェルカムページの色

  • welcomePage.background: ウェルカムページの背景色。

  • welcomePage.progress.background: ウェルカムページのプログレスバーの前景色。

  • welcomePage.progress.foreground: ウェルカムページのプログレスバーの背景色。

  • welcomePage.tileBackground: ウェルカムページのタイルの背景色。

  • welcomePage.tileHoverBackground: ウェルカムページのタイルのホバー時の背景色。

  • welcomePage.tileBorder: ウェルカムページのタイルの境界線の色。

  • walkThrough.embeddedEditorBackground: インタラクティブプレイグラウンドの埋め込みエディターの背景色。

  • walkthrough.stepTitle.foreground: 各ウォークスルーステップの見出しの前景色。

Gitの色

  • gitDecoration.addedResourceForeground: 追加された Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.modifiedResourceForeground: 変更された Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.deletedResourceForeground: 削除された Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.renamedResourceForeground: 名前変更またはコピーされた Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.stageModifiedResourceForeground: ステージングされた変更の Git デコレーションの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.stageDeletedResourceForeground: ステージングされた削除の Git デコレーションの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.untrackedResourceForeground: 未追跡の Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.ignoredResourceForeground: 無視された Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.conflictingResourceForeground: 競合している Git リソースの色。ファイルラベルと SCM ビューレットで使用されます。
  • gitDecoration.submoduleResourceForeground: サブモジュールリソースの色。
  • git.blame.editorDecorationForeground: ブレーム(blame)エディター装飾の色。

ソース管理グラフの色

  • scmGraph.historyItemHoverLabelForeground: 履歴アイテムのホバーラベルの前景色。
  • scmGraph.foreground1: ソース管理グラフの前景色 (1)。
  • scmGraph.foreground2: ソース管理グラフの前景色 (2)。
  • scmGraph.foreground3: ソース管理グラフの前景色 (3)。
  • scmGraph.foreground4: ソース管理グラフの前景色 (4)。
  • scmGraph.foreground5: ソース管理グラフの前景色 (5)。
  • scmGraph.historyItemHoverAdditionsForeground: 履歴アイテムのホバー追加の前景色。
  • scmGraph.historyItemHoverDeletionsForeground: 履歴アイテムのホバー削除の前景色。
  • scmGraph.historyItemRefColor: 履歴アイテムの参照色。
  • scmGraph.historyItemRemoteRefColor: 履歴アイテムのリモート参照色。
  • scmGraph.historyItemBaseRefColor: 履歴アイテムのベース参照色。
  • scmGraph.historyItemHoverDefaultLabelForeground: 履歴アイテムのホバーデフォルトラベルの前景色。
  • scmGraph.historyItemHoverDefaultLabelBackground: 履歴アイテムのホバーデフォルトラベルの背景色。

設定エディターの色

注: これらの色は、基本設定: 設定を開く (UI) コマンドで開くGUI設定エディター用です。

  • settings.headerForeground: セクションヘッダーまたはアクティブなタイトルの前景色。
  • settings.modifiedItemIndicator: 変更された設定を示す行。
  • settings.dropdownBackground: ドロップダウンの背景色。
  • settings.dropdownForeground: ドロップダウンの前景色。
  • settings.dropdownBorder: ドロップダウンの境界線の色。
  • settings.dropdownListBorder: ドロップダウンリストの境界線の色。
  • settings.checkboxBackground: チェックボックスの背景色。
  • settings.checkboxForeground: チェックボックスの前景色。
  • settings.checkboxBorder: チェックボックスの境界線の色。
  • settings.rowHoverBackground: ホバー時の設定行の背景色。
  • settings.textInputBackground: テキスト入力ボックスの背景色。
  • settings.textInputForeground: テキスト入力ボックスの前景色。
  • settings.textInputBorder: テキスト入力ボックスの境界線の色。
  • settings.numberInputBackground: 数値入力ボックスの背景色。
  • settings.numberInputForeground: 数値入力ボックスの前景色。
  • settings.numberInputBorder: 数値入力ボックスの境界線の色。
  • settings.focusedRowBackground: フォーカスされた設定行の背景色。
  • settings.focusedRowBorder: フォーカスされた行の上下の境界線の色。
  • settings.headerBorder: ヘッダーコンテナの境界線の色。
  • settings.sashBorder: 設定エディターの分割ビューのサッシュ境界線の色。
  • settings.settingsHeaderHoverForeground: セクションヘッダーまたはホバーされたタイトルの前景色。

パンくずリスト(Breadcrumbs)ナビゲーションのテーマ色

  • breadcrumb.foreground: パンくずリスト項目の色。
  • breadcrumb.background: パンくずリスト項目の背景色。
  • breadcrumb.focusForeground: フォーカスされたパンくずリスト項目の色。
  • breadcrumb.activeSelectionForeground: 選択されたパンくずリスト項目の色。
  • breadcrumbPicker.background: パンくずリスト項目のピッカーの背景色。

スニペットの色

スニペットのテーマ色

  • editor.snippetTabstopHighlightBackground: スニペットのタブストップのハイライト背景色。
  • editor.snippetTabstopHighlightBorder: スニペットのタブストップのハイライト境界線の色。
  • editor.snippetFinalTabstopHighlightBackground: スニペットの最終タブストップのハイライト背景色。
  • editor.snippetFinalTabstopHighlightBorder: スニペットの最終タブストップのハイライト境界線の色。

シンボルアイコンの色

アウトラインビュー、パンくずリストナビゲーション、提案ウィジェットに表示されるシンボルアイコンのテーマ色

  • 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: null シンボルの前景色。
  • 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: 変数シンボルの前景色。

デバッグアイコンの色

  • 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: デバッグ REPL コンソール内の情報メッセージの前景色。

  • debugConsole.warningForeground: デバッグ REPL コンソール内の警告メッセージの前景色。

  • debugConsole.errorForeground: デバッグ REPL コンソール内のエラーメッセージの前景色。

  • debugConsole.sourceForeground: デバッグ REPL コンソール内のソースファイル名の前景色。

  • debugConsoleInputIcon.foreground: デバッグコンソール入力マーカーアイコンの前景色。

ノートブックの色

  • notebook.editorBackground: ノートブックの背景色。
  • notebook.cellBorderColor: ノートブックセルの境界線の色。
  • notebook.cellHoverBackground: セルがホバーされた時の背景色。
  • notebook.cellInsertionIndicator: ノートブックセル挿入インジケーターの色。
  • notebook.cellStatusBarItemHoverBackground: ノートブックセルステータスバーアイテムの背景色。
  • notebook.cellToolbarSeparator: セル下部ツールバーのセパレーターの色。
  • notebook.cellEditorBackground: ノートブックセルエディターの背景色。
  • notebook.focusedCellBackground: フォーカスされたセルの背景色。
  • notebook.focusedCellBorder: フォーカスされたセルのフォーカスインジケーター境界線の色。
  • notebook.focusedEditorBorder: ノートブックセルエディターの境界線の色。
  • notebook.inactiveFocusedCellBorder: エディターの外側に主フォーカスがある状態でセルがフォーカスされた時の、セルの上下境界線の色。
  • notebook.inactiveSelectedCellBorder: 複数のセルが選択された時のセルの境界線の色。
  • notebook.outputContainerBackgroundColor: ノートブック出力コンテナの背景色。
  • notebook.outputContainerBorderColor: ノートブック出力コンテナの境界線の色。
  • notebook.selectedCellBackground: 選択されたセルの背景色。
  • notebook.selectedCellBorder: セルが選択されているがフォーカスされていない時の、セルの上下境界線の色。
  • notebook.symbolHighlightBackground: ハイライトされたセルの背景色。
  • notebookScrollbarSlider.activeBackground: ノートブックのスクロールバースライダーがクリックされた時の背景色。
  • notebookScrollbarSlider.background: ノートブックのスクロールバースライダーの背景色。
  • notebookScrollbarSlider.hoverBackground: ノートブックのスクロールバースライダーにホバーした時の背景色。
  • notebookStatusErrorIcon.foreground: セルステータスバーにおけるノートブックセルのエラーアイコン色。
  • notebookStatusRunningIcon.foreground: セルステータスバーにおけるノートブックセルの実行中アイコン色。
  • notebookStatusSuccessIcon.foreground: セルステータスバーにおけるノートブックセルの成功アイコン色。
  • notebookEditorOverviewRuler.runningCellForeground: ノートブックエディターのオーバービュールーラー内の実行中セル装飾の色。

チャートの色

  • charts.foreground: チャート内のテキストのコントラスト色。
  • charts.lines: チャート内の線の色。
  • charts.red: チャート内の赤い要素の色。
  • charts.blue: チャート内の青い要素の色。
  • charts.yellow: チャート内の黄色い要素の色。
  • charts.orange: チャート内のオレンジ色の要素の色。
  • charts.green: チャート内の緑色の要素の色。
  • charts.purple: チャート内の紫色の要素の色。
  • chart.line: チャートの線の色。
  • chart.axis: チャートの軸の色。
  • chart.guide: チャートのガイド線。

ポートの色

  • ports.iconRunningProcessForeground: 実行中のプロセスが関連付けられているポートのアイコン色。

コメントビューの色

  • commentsView.resolvedIcon: 解決済みコメントのアイコン色。
  • commentsView.unresolvedIcon: 未解決コメントのアイコン色。

アクションバーの色

  • actionBar.toggledBackground: アクションバーでトグルされたアクションアイテムの背景色。

単純な検索ウィジェットの色

  • simpleFindWidget.sashBorder: サッシュ境界線の色。

ゲージの色

  • gauge.background: ゲージの背景色。
  • gauge.foreground: ゲージの前景色。
  • gauge.border: ゲージの境界線の色。
  • gauge.warningBackground: ゲージの警告背景色。
  • gauge.warningForeground: ゲージの警告前景色。
  • gauge.errorBackground: ゲージのエラー背景色。
  • gauge.errorForeground: ゲージのエラー前景色。

Markdown

  • markdownAlert.note.foreground: マークダウン内の注釈アラートの前景色。
  • markdownAlert.tip.foreground: マークダウン内のヒントアラートの前景色。
  • markdownAlert.important.foreground: マークダウン内の重要アラートの前景色。
  • markdownAlert.warning.foreground: マークダウン内の警告アラートの前景色。
  • markdownAlert.caution.foreground: マークダウン内の注意アラートの前景色。

エージェントセッションの色

  • agentSessionReadIndicator.foreground: エージェントセッションの既読インジケーターの前景色。
  • agentSessionSelectedBadge.border: 選択されたエージェントセッション項目のバッジの境界線の色。
  • agentSessionSelectedUnfocusedBadge.border: ビューがフォーカスされていない時の、選択されたエージェントセッション項目のバッジの境界線の色。
  • agentStatusIndicator.background: タイトルバーのエージェントステータスインジケーターの背景色。
  • aiCustomizationManagement.sashBorder: チャットカスタマイズ管理エディターの分割ビューのサッシュ境界線の色。

拡張機能の色

色のIDは、色貢献ポイントを通じて拡張機能によって提供することもできます。これらの色は、workbench.colorCustomizations 設定でコード補完を使用する際や、カラーテーマ定義ファイルにも表示されます。ユーザーは、拡張機能の貢献タブで、拡張機能がどのような色を定義しているかを確認できます。

© . This site is unofficial and not affiliated with Microsoft.