編集

テーマ

配色テーマ

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

Preview themes from the Command Palette

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

ファイル > 設定 > テーマ > 配色テーマ メニュー項目を選択するか、または 設定: 配色テーマ コマンド（⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)）を使用して、配色テーマピッカーを表示します。
上キーと下キーを使用してリスト内を移動し、テーマの色をプレビューします。
希望するテーマを選択し、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 拡張機能マーケットプレイスにアップロードされています。

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

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

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

Searching for themes in the Extensions view

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

Windows と macOS は、明るい配色スキームと暗い配色スキームをサポートしています。window.autoDetectColorScheme という設定があり、VS Code に OS の配色スキームの変更をリッスンし、それに応じて一致するテーマに切り替えるように指示します。

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

配色スキームが変更されたときに使用されるテーマをカスタマイズするには、設定エディターで、推奨される明るいテーマ、暗いテーマ、高コントラストテーマを設定できます。

ワークベンチ: 推奨の暗い配色テーマ - デフォルトは Dark Modern
ワークベンチ: 推奨の明るい配色テーマ - デフォルトは Light Modern
ワークベンチ: 推奨の高コントラスト配色テーマ - デフォルトは Dark High Contrast
ワークベンチ: 推奨の高コントラストライト配色テーマ - デフォルトは Light High Contrast

Settings editor filtered on the preferred color themes settings

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

ワークベンチの色

アクティブな配色テーマは、workbench.colorCustomizations および editor.tokenColorCustomizations ユーザー設定でカスタマイズできます。

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

activity bar theming

workbench.colorCustomizations の値を設定する際に 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 を使用します。

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 は、セマンティックハイライトが適用されるかどうかを制御する主要な設定です。値は 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

特定の言語でセマンティックトークンが利用可能で、テーマによって有効になっている場合、検査ツールは セマンティックトークンタイプ セクションを表示します。このセクションには、セマンティックトークン情報（タイプと任意の数の修飾子）および適用されるスタイルルールが表示されます。

セマンティックトークンとスタイルルール構文に関する詳細情報は、セマンティックハイライトガイドで確認できます。

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

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

VS Code の Yeoman 拡張機能ジェネレーターは、残りの拡張機能の生成に役立ちます。

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

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

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

built-in themes

他の VS Code 拡張機能と同様に、ギアコンテキストメニューの 無効化 コマンドで組み込みテーマ拡張機能を無効にできます。

disable theme

ファイルアイコンテーマ

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

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

ファイル > 設定 > テーマ > ファイルアイコンテーマ メニュー項目を選択するか、または 設定: ファイルアイコンテーマ コマンドを使用して、ファイルアイコンテーマピッカーを表示します。
上キーと下キーを使用してリスト内を移動し、テーマのアイコンをプレビューします。
希望するテーマを選択し、Enterを押します。

デフォルトでは、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は、https://vscode.devでブラウザ内で完全に動作する、無料でインストール不要のVS Code体験を提供します。

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

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

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

製品アイコンテーマ

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

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

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

ファイル > 設定 > テーマ > 製品アイコンテーマ メニュー項目を選択するか、または 設定: 製品アイコンテーマ コマンドを使用して、製品アイコンテーマピッカーを表示します。
上キーと下キーを使用してリスト内を移動し、テーマのアイコンをプレビューします。
希望するテーマを選択し、Enterを押します。

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

次のステップ

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

設定 - ユーザー設定とワークスペース設定を通じて、VS Code を好みに合わせて設定する方法を学びます。
スニペット - お気に入りの言語にスニペットを追加します。
拡張機能 API - VS Code を拡張するその他の方法について学びます。
配色テーマ - 配色テーマ拡張機能 API。
ファイルアイコンテーマ - ファイルアイコンテーマ拡張機能 API。

10/09/2025