VS Codeのエージェントモードを拡張するには、を試してください!

テーマカラー

アクティブな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: 整形済みテキストセグメントの背景色。
  • 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: ホバー時のセカンダリボタンの背景色。
  • 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.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: インラインチャットで挿入されたコンテンツに対するミニマップマーカーの色。

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

エディターグループはエディターのコンテナです。複数のエディターグループが存在する可能性があります。タブはエディターのコンテナです。1つのエディターグループに複数のタブを開くことができます。

  • editorGroup.border: 複数のエディターグループを互いに区切る色。

    editorGroup.border

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

    editorGroup.dropBackground

  • editorGroupHeader.noTabsBackground: 単一タブ使用時のエディターグループタイトルヘッダーの背景色("workbench.editor.showTabs": "single" を設定)。

    editorGroupHeader.noTabsBackground

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

    editorGroupHeader.tabsBackground

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

    editorGroupHeader.tabsBorder

  • editorGroupHeader.border: エディターグループヘッダーとエディター間の境界線の色(有効な場合、パンくずリストの下)。

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

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

  • editorGroup.dropIntoPromptForeground: ファイルをドラッグする際にエディター上に表示されるテキストの前景色。このテキストは、ユーザーにShiftキーを押しながらドロップできることを通知します。

  • editorGroup.dropIntoPromptBackground: ファイルをドラッグする際にエディター上に表示されるテキストの背景色。このテキストは、ユーザーにShiftキーを押しながらドロップできることを通知します。

  • editorGroup.dropIntoPromptBorder: ファイルをドラッグする際にエディター上に表示されるテキストの境界線の色。このテキストは、ユーザーにShiftキーを押しながらドロップできることを通知します。

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

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

  • tab.activeForeground: アクティブなグループのアクティブなタブの前景色。

  • tab.border: タブを互いに区切る境界線。

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

  • tab.selectedBorderTop: 選択されたタブの上部境界線。タブはエディター領域のエディターのコンテナです。1つのエディターグループに複数のタブを開くことができます。複数のエディターグループが存在する可能性があります。

  • tab.selectedBackground: 選択されたタブの背景。タブはエディター領域のエディターのコンテナです。1つのエディターグループに複数のタブを開くことができます。複数のエディターグループが存在する可能性があります。

  • tab.selectedForeground: 選択されたタブの前景色。タブはエディター領域のエディターのコンテナです。1つのエディターグループに複数のタブを開くことができます。複数のエディターグループが存在する可能性があります。

  • tab.dragAndDropBorder: 2つのタブ間にタブを挿入できることを示すタブ間の境界線。タブはエディター領域のエディターのコンテナです。1つのエディターグループに複数のタブを開くことができます。複数のエディターグループが存在する可能性があります。

  • 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: エディターグループで上下に並べて表示される2つのエディターを区切る色。

  • sideBySideEditor.verticalBorder: エディターグループで左右に並べて表示される2つのエディターを区切る色。

エディターの色

最も目立つエディターの色は、構文強調表示に使用されるトークン色であり、インストールされている言語の文法に基づいています。これらの色はカラーテーマによって定義されますが、editor.tokenColorCustomizations設定でカスタマイズすることもできます。カラーテーマの更新と利用可能なトークンタイプの詳細については、カラーテーマのカスタマイズを参照してください。

その他のエディターの色はここにリストされています。

  • editor.background: エディターの背景色。
  • editor.foreground: エディターのデフォルトの前景色。
  • editorLineNumber.foreground: エディターの行番号の色。
  • editorLineNumber.activeForeground: アクティブなエディターの行番号の色。
  • editorLineNumber.dimmedForeground: editor.renderFinalNewlineが dimmed に設定されている場合の最終行のエディターの行番号の色。
  • editorCursor.background: エディターカーソルの背景色。ブロックカーソルに覆われた文字の色をカスタマイズできます。
  • editorCursor.foreground: エディターカーソルの色。
  • editorMultiCursor.primary.foreground: 複数のカーソルが存在する場合のプライマリエディターカーソルの色。
  • editorMultiCursor.primary.background: 複数のカーソルが存在する場合のプライマリエディターカーソルの背景色。ブロックカーソルに覆われた文字の色をカスタマイズできます。
  • editorMultiCursor.secondary.foreground: 複数のカーソルが存在する場合のセカンダリエディターカーソルの色。
  • editorMultiCursor.secondary.background: 複数のカーソルが存在する場合のセカンダリエディターカーソルの背景色。ブロックカーソルに覆われた文字の色をカスタマイズできます。
  • editor.placeholder.foreground: エディターのプレースホルダーテキストの前景色。
  • editor.compositionBorder: IMEの構成に対する境界線の色。

選択色は、1つ以上の文字を選択したときに表示されます。選択に加えて、同じ内容のすべての領域が強調表示されます。

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: 検索ビューレットの完了メッセージのテキストの色。例えば、"{x} results in {y} files"というテキストで使用されます。

検索エディターの色は、検索エディターで結果を強調表示します。同じエディター内の異なるクラスの一致をより適切に区別するために、他の検索一致とは別に設定できます。

Search Editor Matches

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

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

Hover Highlight

  • editor.hoverHighlightBackground: ホバーが表示されている単語の下のハイライト。下にある装飾を隠さないように、色は不透明であってはなりません。

現在の行は通常、背景のハイライトまたは境界線として表示されます(両方ではありません)。

Line Highlight

  • editor.lineHighlightBackground: カーソル位置の行のハイライトの背景色。
  • editor.lineHighlightBorder: カーソル位置の行の周囲の境界線の背景色。

エディターの透かしの色

  • editorWatermark.foreground: エディターの透かしのラベルの前景色。

Unicodeハイライトの色

  • editorUnicodeHighlight.border: Unicode文字を強調表示するために使用される境界線の色。
  • editorUnicodeHighlight.background: Unicode文字を強調表示するために使用される背景色。

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

Link

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

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

Range Highlight

  • editor.rangeHighlightBackground: ハイライトされた範囲の背景色で、クイックオープン、ファイル内のシンボル、検索機能で使用されます。下にある装飾を隠さないように、色は不透明であってはなりません。
  • editor.rangeHighlightBorder: ハイライトされた範囲の周囲の境界線の背景色。

シンボルハイライトは、定義へ移動コマンドなどを使用してシンボルに移動したときに表示されます。

  • editor.symbolHighlightBackground: ハイライトされたシンボルの背景色。下にある装飾を隠さないように、色は不透明であってはなりません。
  • editor.symbolHighlightBorder: ハイライトされたシンボルの周囲の境界線の背景色。

エディターの空白文字を表示するには、空白文字の表示切り替えを有効にします。

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

エディターのインデントガイドを表示するには、"editor.guides.indentation": true"editor.guides.highlightActiveIndentation": true を設定します。

  • 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: マッチする括弧ボックスの色。

括弧ペアの色付け

  • 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: インラインチャットで削除されたコンテンツの概要ルーラーマーカーの色。

エラーと警告

  • 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: エディターの不要な(未使用の)ソースコードの不透明度。例えば、"#000000c0"はコードを75%の不透明度でレンダリングします。ハイコントラストテーマの場合、不要なコードをフェードアウトする代わりに、"editorUnnecessaryCode.border"テーマ色を使用して下線を引いてください。

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

  • 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: ガターアイテム背景のエディターガター装飾色。この色は不透明であるべきです。

エディターのコメントウィジェットは、プルリクエストをレビューするときに表示されます。

  • editorCommentsWidget.resolvedBorder: 解決済みコメントの境界線と矢印の色。
  • editorCommentsWidget.unresolvedBorder: 未解決コメントの境界線と矢印の色。
  • editorCommentsWidget.rangeBackground: コメント範囲の背景色。
  • editorCommentsWidget.rangeActiveBackground: 現在選択されている、またはホバーされているコメント範囲の背景色。
  • editorCommentsWidget.replyInputBackground: コメント返信入力ボックスの背景色。

エディターのインライン編集は、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: 2つのテキストエディター間の境界線の色。
  • diffEditor.diagonalFill: diffエディターの対角線塗りつぶしの色。対角線塗りつぶしは並列diffビューで使用されます。
  • diffEditor.insertedLineBackground: 挿入された行の背景色。下にある装飾を隠さないように、色は不透明であってはなりません。
  • diffEditor.removedLineBackground: 削除された行の背景色。下にある装飾を隠さないように、色は不透明であってはなりません。
  • diffEditorGutter.insertedLineBackground: 行が挿入されたマージンの背景色。
  • diffEditorGutter.removedLineBackground: 行が削除されたマージンの背景色。
  • diffEditorOverview.insertedForeground: 挿入された内容のDiff概要ルーラーの前景色。
  • diffEditorOverview.removedForeground: 削除された内容のDiff概要ルーラーの前景色。
  • diffEditor.unchangedRegionBackground: Diffエディターの変更されていないブロックの色。
  • diffEditor.unchangedRegionForeground: Diffエディターの変更されていないブロックの前景色。
  • diffEditor.unchangedRegionShadow: 変更されていない領域ウィジェットの周囲の影の色。
  • diffEditor.unchangedCodeBackground: Diffエディターの変更されていないコードの背景色。
  • diffEditor.move.border: Diffエディターで移動されたテキストの境界線の色。
  • diffEditor.moveActive.border: Diffエディターで移動されたテキストのアクティブな境界線の色。
  • multiDiffEditor.headerBackground: Diffエディターのヘッダーの背景色
  • multiDiffEditor.background: 複数ファイルdiffエディターの背景色
  • multiDiffEditor.border: 複数ファイルdiffエディターの境界線の色

チャットの色

  • chat.requestBorder: チャットリクエストの境界線の色。
  • chat.requestBackground: チャットリクエストの背景色。
  • chat.slashCommandBackground: チャットスラッシュコマンドの背景色。
  • chat.slashCommandForeground: チャットスラッシュコマンドの前景色。
  • chat.avatarBackground: チャットアバターの背景色。
  • chat.avatarForeground: チャットアバターの前景色。
  • chat.editedFileForeground: チャット編集ファイルリスト内のチャット編集ファイルの前景色。
  • chat.linesAddedForeground: チャットコードブロックピル内で追加された行の前景色。
  • chat.linesRemovedForeground: チャットコードブロックピル内で削除された行の前景色。
  • chat.requestCodeBorder: チャットリクエストバブル内のコードブロックの境界線の色。
  • chat.requestBubbleBackground: チャットリクエストバブルの背景色。
  • chat.requestBubbleHoverBackground: ホバー時のチャットリクエストバブルの背景色。

インラインチャットの色

  • 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: 2つのホバーを含む項目をホバーしたときのステータスバー項目の背景色。ステータスバーはウィンドウの下部に表示されます。
  • 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: 拡張機能アクションのボタンの区切り線の色。
  • extensionBadge.remoteBackground: 拡張機能ビューのリモートバッジの背景色。
  • extensionBadge.remoteForeground: 拡張機能ビューのリモートバッジの前景色。
  • extensionIcon.starForeground: 拡張機能の評価のアイコン色。
  • extensionIcon.verifiedForeground: 拡張機能の検証済みパブリッシャーのアイコン色。
  • extensionIcon.preReleaseForeground: プレリリース版拡張機能のアイコン色。
  • extensionIcon.sponsorForeground: 拡張機能のスポンサーのアイコン色。
  • extensionIcon.privateForeground: プライベート拡張機能のアイコン色。

クイックピックの色

  • 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カラー。

  • terminal.ansiBlue: ターミナルの「青」ANSIカラー。

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

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

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

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

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

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

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

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

  • terminal.ansiCyan: ターミナルの「シアン」ANSIカラー。

  • terminal.ansiGreen: ターミナルの「緑」ANSIカラー。

  • terminal.ansiMagenta: ターミナルの「マゼンタ」ANSIカラー。

  • terminal.ansiRed: ターミナルの「赤」ANSIカラー。

  • terminal.ansiWhite: ターミナルの「白」ANSIカラー。

  • terminal.ansiYellow: ターミナルの「黄」ANSIカラー。

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

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

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

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

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

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

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

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

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

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

デバッグの色

  • 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: 履歴項目のホバーデフォルトラベルの背景色。

設定エディターの色

注: これらの色は、Preferences: Open Settings (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: セクションヘッダーまたはホバーされたタイトルの前景色。

ブレッドクラムナビゲーションのテーマカラー

  • 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: ゲージのエラーの前景色。

拡張機能の色

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