🚀 VS Code でしましょう!

テーマの色

アクティブな Visual Studio Code 配色テーマは、workbench.colorCustomizations ユーザー設定でカスタマイズできます。

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

: 既存の配色テーマを使用する場合は、「配色テーマ」を参照してください。ここでは、[基本設定: 配色テーマ] ドロップダウン (⌘K ⌘T (Ctrl+K Ctrl+T (Windows, Linux))) を使用してアクティブな配色テーマを設定する方法について説明しています。

テーマの色は、webview で CSS 変数として使用できます。また、IntelliSense を提供する拡張機能も利用可能です。

色の形式

色の値は、透明度用のアルファチャネルを持つ RGB カラーモデルで定義できます。形式として、次の 16 進表記がサポートされています: #RGB#RGBA#RRGGBB、および #RRGGBBAA。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.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} 個の結果が {y} 個のファイルにあります" というテキストで使用されます。

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

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.addedBackground: 追加された行のエディターグリッターの背景色です。
  • editorGutter.deletedBackground: 削除された行のエディターグリッターの背景色です。
  • 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: タブで受け入れられる場合の元のテキスト上のインライン編集ウィジェットの元のボーダー色です。

差分エディターの色

挿入および削除されたテキストの色付けには、背景色またはボーダー色のいずれかを使用しますが、両方は使用しないでください。

  • diffEditor.insertedTextBackground: 挿入されたテキストの背景色です。色は、背後にある装飾を隠さないように、不透明であってはなりません。
  • diffEditor.insertedTextBorder: 挿入されたテキストのアウトライン色です。
  • diffEditor.removedTextBackground: 削除されたテキストの背景色です。色は、背後にある装飾を隠さないように、不透明であってはなりません。
  • diffEditor.removedTextBorder: 削除されたテキストのアウトライン色です。
  • diffEditor.border: 2 つのテキストエディター間のボーダー色です。
  • diffEditor.diagonalFill: 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: 編集済みファイルリスト内のチャット編集済みファイルの前景色です。

インラインチャットの色

  • 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: エディター内のスティッキースクロールの影の色です。

  • 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: ピークビューエディターのスティッキースクロールの背景色です。

マージコンフリクトの色

マージコンフリクトの装飾は、エディターに特別な差分範囲が含まれている場合に表示されます。

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: ワークベンチがオフラインのときのステータスバー項目のホバー背景色。

主要項目は、重要性を示すために他のステータスバーエントリよりも目立つように表示されます。一例として、[Tab キーでフォーカスを移動] コマンドの変更モードインジケーターがあります。

タイトルバーの色

  • 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: ターミナル内の「明るい黒」の ANSI カラー。

  • terminal.ansiBrightBlue: ターミナル内の「明るい青」の ANSI カラー。

  • terminal.ansiBrightCyan: ターミナル内の「明るいシアン」の ANSI カラー。

  • terminal.ansiBrightGreen: ターミナル内の「明るい緑」の ANSI カラー。

  • terminal.ansiBrightMagenta: ターミナル内の「明るいマゼンタ」の ANSI カラー。

  • terminal.ansiBrightRed: ターミナル内の「明るい赤」の ANSI カラー。

  • terminal.ansiBrightWhite: ターミナル内の「明るい白」の ANSI カラー。

  • terminal.ansiBrightYellow: ターミナル内の「明るい黄」の 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: Enum メンバーアイコンの前景色。これらのアイコンは、ターミナルの提案ウィジェットに表示されます。

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

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

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

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

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

デバッグの色

  • debugToolBar.background: デバッグツールバーの背景色。
  • debugToolBar.border: デバッグツールバーのボーダー色。
  • editor.stackFrameHighlightBackground: エディター内の最上位スタックフレームのハイライトの背景色。
  • editor.focusedStackFrameHighlightBackground: エディター内のフォーカスされたスタックフレームのハイライトの背景色。
  • editor.inlineValuesForeground: デバッグインライン値テキストの色。
  • editor.inlineValuesBackground: デバッグインライン値の背景色。
  • debugView.exceptionLabelForeground: デバッガーが例外で中断したときに、[コールスタック] ビューに表示されるラベルの前景色。
  • debugView.exceptionLabelBackground: デバッガーが例外で中断したときに、[コールスタック] ビューに表示されるラベルの背景色。
  • debugView.stateLabelForeground: 現在のセッションまたはスレッドの状態を示す [コールスタック] ビューのラベルの前景色。
  • debugView.stateLabelBackground: 現在のセッションまたはスレッドの状態を示す [コールスタック] ビューのラベルの背景色。
  • 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 は、拡張機能によって 色の contribution point を通じて提供することもできます。これらの色は、workbench.colorCustomizations 設定およびカラーテーマ定義ファイルでコード補完を使用する場合にも表示されます。ユーザーは、拡張機能が定義する色を 拡張機能の contributions タブで確認できます。