💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

テーマ

配色テーマ

配色テーマを使用すると、Visual Studio Code のユーザー インターフェースの色を好みに合わせて変更し、作業環境に合わせることができます。配色テーマは、VS Code のユーザー インターフェース要素とエディターのハイライト色の両方に影響します。

Preview themes from the Command Palette

別の配色テーマを選択するには

  1. ファイル > 基本設定 > テーマ > 配色テーマ メニュー項目を選択するか、基本設定: 配色テーマ コマンド (⌘K ⌘T (Windows、Linux は Ctrl+K Ctrl+T)) を使用して、配色テーマのピッカーを表示します。

  2. 上 キーと 下 キーを使用してリストを移動し、テーマの色をプレビューします。

  3. 好みのテーマを選択して Enter キーを押します。

アクティブな配色テーマは、ユーザー 設定 (キーボード ショートカット ⌘, (Windows、Linux は Ctrl+,)) に保存されます。

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Solarized Dark"
ヒント

デフォルトでは、テーマはユーザー設定に保存され、すべてのワークスペースにグローバルに適用されます。ワークスペース固有のテーマを構成することもできます。これを行うには、ワークスペース 設定でテーマを設定します。

Screenshot of Settings editor to set a workspace-specific Color Theme.

Marketplace の配色テーマ

VS Code には、すぐに試せる配色テーマがいくつか用意されています。さらに多くのテーマが、コミュニティによって VS Code 拡張機能 Marketplace にアップロードされています。

配色テーマのピッカーから 追加の配色テーマを参照... を選択することで、VS Code Marketplace の配色テーマを直接選択できます。

Screenshot of Color Theme picker, highlighting the option to browse themes from the VS Code Marketplace.

または、拡張機能ビュー (⇧⌘X (Windows、Linux は Ctrl+Shift+X)) の検索ボックスで @category:"themes" フィルターを使用してテーマを検索することもできます。

Searching for themes in the Extensions view

OS のカラー スキームに基づいて自動的に切り替える

Windows と macOS は、ライトおよびダークのカラー スキームをサポートしています。設定 window.autoDetectColorScheme VS Code で開く VS Code Insiders で開く を使用すると、OS のカラー スキームの変更を検出して、それに応じたテーマに自動的に切り替えるよう VS Code に指示できます。

同様に、 window.autoDetectHighContrast VS Code で開く VS Code Insiders で開く 設定を使用して、OS が高コントラストのカラー スキームに切り替わったかどうかを自動的に検出できます。

カラー スキームが変更されたときに使用されるテーマをカスタマイズするには、設定エディターで好みのライト、ダーク、および高コントラストのテーマを設定できます。

  • Workbench: Preferred Dark Color Theme - デフォルトは Dark Modern
  • Workbench: Preferred Light Color Theme - デフォルトは Light Modern
  • Workbench: Preferred High Contrast Color Theme - デフォルトは Dark High Contrast
  • Workbench: Preferred High Contrast Light Color Theme - デフォルトは Light High Contrast

Settings editor filtered on the preferred color themes settings

配色テーマのカスタマイズ

ワークベンチの色

アクティブな配色テーマは、ユーザー 設定の workbench.colorCustomizations VS Code で開く VS Code Insiders で開く および editor.tokenColorCustomizations VS Code で開く VS Code Insiders で開く を使用してカスタマイズできます。

リストとツリー (ファイル エクスプローラー、候補ウィジェット)、差分エディター、アクティビティ バー、通知、スクロール バー、分割ビュー、ボタンなどの VS Code UI 要素の色を設定するには、 workbench.colorCustomizations VS Code で開く VS Code Insiders で開く を使用します。

activity bar theming

workbench.colorCustomizations VS Code で開く VS Code Insiders で開く の値を設定する際には IntelliSense を使用できます。カスタマイズ可能なすべての色の一覧については、テーマ カラー リファレンスを参照してください。

特定のテーマをカスタマイズするには、次の構文を使用します

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

カスタマイズを複数のテーマに適用する場合は、複数のテーマ名を指定するか、名前の先頭と末尾にワイルドカードとして * を使用できます。

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

テーマに設定されている色や境界線が気に入らない場合は、default を使用して元の値に戻すことができます。

  "workbench.colorCustomizations": {
      "diffEditor.removedTextBorder": "default"
  }

エディターの構文ハイライト

エディターの構文ハイライトの色を微調整するには、ユーザー 設定 の settings.json ファイルで editor.tokenColorCustomizations VS Code で開く VS Code Insiders で開く を使用します。

Token Color Customization

最も一般的な構成要素向けに、事前定義された構文トークン ('comments'、'strings' など) が用意されています。さらに細かくカスタマイズしたい場合は、TextMate テーマの色ルールを直接指定して行うことができます。

Advanced Token Color Customization

注意

TextMate の文法がどのように機能するかを理解する必要があるため、TextMate ルールを直接構成するのは上級者向けのスキルです。詳細については、配色テーマ ガイドを参照してください。

特定のテーマをカスタマイズするには、次のいずれかの方法で行うことができます

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

エディターのセマンティック ハイライト

一部の言語 (現在は TypeScript、JavaScript、Java) は、セマンティック トークンを提供しています。セマンティック トークンは、言語サービスのシンボル理解に基づいており、正規表現で動作する TextMate 文法から取得される構文トークンよりも正確です。セマンティック トークンから計算されるセマンティック ハイライトは、構文ハイライトの上に重ねて適用され、次の例に示すように、ハイライトを修正および強化することができます。

セマンティック ハイライトなしの "Tomorrow Night Blue" 配色テーマ

without semantic highlighting

セマンティック ハイライトありの "Tomorrow Night Blue" 配色テーマ

with semantic highlighting

言語サービスのシンボル理解による色の違いに注目してください

  • 10 行目: languageModes がパラメーターとして色付けされています。
  • 11 行目: Range と Position がクラスとして、document がパラメーターとして色付けされています。
  • 13 行目: getFoldingRanges が関数として色付けされています。

設定 editor.semanticHighlighting.enabled VS Code で開く VS Code Insiders で開く は、セマンティック ハイライトを適用するかどうかを制御するメイン設定です。値として true、false、および configuredByTheme を指定できます。

  • true および false は、すべてのテーマでセマンティック ハイライトの有効/無効を切り替えます。
  • configuredByTheme はデフォルト設定であり、セマンティック ハイライトを有効にするかどうかをテーマごとに制御します。VS Code に付属するすべてのテーマ (「Dark+」デフォルトなど) では、デフォルトでセマンティック ハイライトが有効になっています。

次の方法でテーマ設定をオーバーライドできます

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
}

セマンティック ハイライトが有効であり、該当する言語で利用可能である場合、セマンティック トークンを色付けするかどうか、およびどのように色付けするかはテーマ側の設定に委ねられます。一部のセマンティック トークンは標準化されており、確立された TextMate スコープにマッピングされています。テーマにこれらの TextMate スコープのカラー ルールがある場合、セマンティック トークンは、追加のカラー ルールを必要とせずに、その色でレンダリングされます。

追加のスタイル ルールは editor.semanticTokenColorCustomizations で構成できます

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
}

計算されたセマンティック トークンと、それらがどのようにスタイル設定されているかを確認するには、スコープ インスペクター (開発者: エディターのトークンとスコープの検査) を使用できます。これにより、現在のカーソル位置のテキストに関する情報が表示されます。

scope inspector

指定された位置の言語でセマンティック トークンが利用可能であり、テーマによって有効になっている場合、検査ツールには semantic token type セクションが表示されます。このセクションには、セマンティック トークン情報 (タイプと任意の数の修飾子) と、適用されているスタイル ルールが表示されます。

セマンティック トークンとスタイル ルールの構文に関する詳細については、セマンティック ハイライト ガイドを参照してください。

独自の配色テーマを作成する

テーマ拡張機能の作成と公開は簡単です。ユーザー設定で色をカスタマイズしてから、開発者: 現在の設定から配色テーマを生成する コマンドを使用してテーマ定義ファイルを生成します。

VS Code の Yeoman 拡張機能ジェネレーターを使用すると、拡張機能の残りの部分を簡単に生成できます。

詳細については、拡張機能 API セクションの 新しい配色テーマの作成に関する記事を参照してください。

デフォルトの配色テーマを削除する

VS Code に付属するデフォルトのテーマの一部を配色テーマのピッカーから削除したい場合は、拡張機能ビュー (⇧⌘X (Windows、Linux は Ctrl+Shift+X)) で無効にすることができます。拡張機能ビューの上部にある 拡張機能のフィルター ボタンを選択し、組み込み オプションを選択すると、デフォルトのテーマがリストされた テーマ セクションが表示されます。

built-in themes

他の VS Code 拡張機能と同様に、歯車アイコンのコンテキスト メニューにある 無効にする コマンドを使用して、組み込みのテーマ拡張機能を無効にすることができます。

disable theme

ファイル アイコンテーマ

ファイル アイコンは、特定のファイル タイプを示します。これらのアイコンは、エクスプローラー ビューやタブの見出しのファイル名の横に表示されます。ファイル アイコン テーマは、拡張機能によって提供されます。

別のファイル アイコン テーマを選択するには

  1. ファイル > 基本設定 > テーマ > ファイル アイコン テーマ メニュー項目を選択するか、基本設定: ファイル アイコン テーマ コマンドを使用して、ファイル アイコン テーマのピッカーを表示します。

  2. 上 キーと 下 キーを使用してリストを移動し、テーマのアイコンをプレビューします。

  3. 好みのテーマを選択して Enter キーを押します。

file icon theme dropdown

デフォルトでは、Seti ファイル アイコン テーマが使用され、これらはエクスプローラー ビューに表示されるアイコンです。VS Code は、再起動してもファイル アイコン テーマの選択を記憶します。なし を選択して、ファイル アイコンを無効にすることもできます。

VS Code には、Minimal と Seti の 2 つのファイル アイコン テーマが付属しています。さらにファイル アイコン テーマをインストールするには、ファイル アイコン テーマ ピッカーで 追加のファイル アイコン テーマをインストール を選択します。これにより、アイコン テーマでフィルターされた拡張機能ビューが開きます。

VS Code Marketplace サイトを直接参照して、利用可能なテーマを見つけることもできます。

アクティブなファイル アイコン テーマは、ユーザー 設定 (キーボード ショートカット ⌘, (Windows、Linux は Ctrl+,)) に保存されます。

  // Specifies the file icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"

独自のファイル アイコン テーマを作成する

アイコン (推奨は SVG) から独自のファイル アイコン テーマを作成できます。詳細については、拡張機能 API セクションの ファイル アイコン テーマに関する記事を参照してください。

Web 版 VS Code

VS Code for the Web は、インストール不要で、ブラウザー内で完全に動作する無料の VS Code エクスペリエンスを https://vscode.dev で提供します。

VS Code for the Web では、URL スキーマ https://vscode.dev/editor/theme/<extensionId> を使用して、配色テーマを共有したり体験したりできます。

たとえば、ダウンロードやインストールのプロセスを経ることなく、https://vscode.dev/editor/theme/sdras.night-owl にアクセスして Night Owl テーマを体験できます。

テーマのプレビューと共有に関する詳細については、VS Code for the Web のドキュメントを参照してください。

製品アイコン テーマ

製品アイコン テーマを使用すると、特定のファイル タイプのアイコン以外の、VS Code ユーザー インターフェースのアイコンを変更できます。たとえば、アクティビティ バー内のビューのアイコンや、レイアウトを変更するためのタイトル バーのアイコンを変更できます。

次の画像で、別の製品アイコン テーマを選択したときにアクティビティ バーのアイコンがどのように更新されるかを確認してください。

Screenshot of the Product Icon Theme dropdown, and how the Activity Bar icons are changed.

別の製品アイコン テーマを選択するには

  1. ファイル > 基本設定 > テーマ > 製品アイコン テーマ メニュー項目を選択するか、基本設定: 製品アイコン テーマ コマンドを使用して、製品アイコン テーマのピッカーを表示します。

  2. 上 キーと 下 キーを使用してリストを移動し、テーマのアイコンをプレビューします。

  3. 好みのテーマを選択して Enter キーを押します。

デフォルトでは、VS Code には 1 つの製品アイコン テーマである Default が付属しています。製品アイコン テーマのピッカーから 追加の製品アイコン テーマを参照... を選択することで、VS Code Marketplace の製品アイコン テーマを直接選択できます。

次のステップ

テーマは VS Code をカスタマイズする一手法にすぎません。VS Code のカスタマイズと拡張性についてさらに詳しく知りたい場合は、以下の記事を参照してください

  • 設定 - ユーザー設定とワークスペース設定を使用して、VS Code を好みに合わせて構成する方法を学びます。
  • スニペット - お気に入りの言語にカスタム スニペットを追加します。
  • 拡張機能 API - VS Code を拡張するその他の方法について学びます。
  • 配色テーマ - 配色テーマ拡張機能 API。
  • ファイル アイコン テーマ - ファイル アイコン テーマ拡張機能 API。
02/04/2026
© . This site is unofficial and not affiliated with Microsoft.