編集

テーマ

配色テーマ

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

Preview themes from the Command Palette

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

File > Preferences > Theme > Color Theme メニュー項目を選択するか、Preferences: Color Theme コマンド (⌘K ⌘T (Windows、Linux の場合は Ctrl+K Ctrl+T)) を使用して配色テーマピッカーを表示します。
Up キーと Down キーを使用してリストを移動し、テーマの色をプレビューします。
使用したいテーマを選択し、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 にアップロードされています。

Browse Additional Color Themes... を選択すると、配色テーマピッカーから直接 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 が OS の配色の変更をリッスンし、それに応じて一致するテーマに切り替えるように指示します。

同様に、window.autoDetectHighContrast 設定を使用して、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 と 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 }
        }
    }
}

どのセマンティックトークンが計算され、どのようにスタイル付けされているかを確認するには、スコープインスペクター (Developer: Inspect Editor Tokens and Scopes) を使用できます。これは、現在のカーソル位置のテキストに関する情報を表示します。

scope inspector

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

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

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

テーマ拡張機能の作成と公開は簡単です。ユーザー設定で色をカスタマイズし、Developer: Generate Color Theme From Current Settings コマンドでテーマ定義ファイルを生成します。

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

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

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

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

built-in themes

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

disable theme

ファイルアイコンテーマ

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

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

File > Preferences > Theme > File Icon Theme メニュー項目を選択するか、Preferences: File Icon Theme コマンドを使用してファイルアイコンテーマピッカーを表示します。
Up キーと Down キーを使用してリストを移動し、テーマのアイコンをプレビューします。
使用したいテーマを選択し、Enter を押します。

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

VS Code には、Minimal と Seti の 2 つのファイルアイコンテーマが同梱されています。さらに多くのファイルアイコンテーマをインストールするには、ファイルアイコンテーマピッカーでInstall Additional File Icon Themes項目を選択します。これにより、アイコンテーマでフィルタリングされた拡張機能ビューが開きます。

また、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 ユーザーインターフェイス内のアイコンを変更できます。例えば、アクティビティバーのビューのアイコンや、レイアウトを変更するためのタイトルバーのアイコンを変更できます。

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

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

File > Preferences > Theme > Product Icon Theme メニュー項目を選択するか、Preferences: Product Icon Theme コマンドを使用して製品アイコンテーマピッカーを表示します。
Up キーと Down キーを使用してリストを移動し、テーマのアイコンをプレビューします。
使用したいテーマを選択し、Enter を押します。

デフォルトでは、VS Code には Default という 1 つの製品アイコンテーマが付属しています。製品アイコンテーマピッカーで Browse Additional Product Icon Themes... を選択することで、VS Code Marketplace からさらに多くの製品アイコンテーマを選択できます。

次のステップ

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

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

08/07/2025