テーマ

カラーテーマ

カラーテーマを使用すると、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.

マーケットプレースからのカラーテーマ

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

カラーテーマピッカーで追加のカラーテーマを参照...を選択すると、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 は、明るい配色と暗い配色の両方をサポートしています。VS Code に、OS の配色スキームの変更を監視し、それに応じて一致するテーマに切り替えるように指示する設定、window.autoDetectColorScheme があります。

同様に、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

最も一般的な構文構成には、事前に構成された一連の構文トークン (「コメント」、「文字列」、...) が利用できます。さらに必要に応じて、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

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

セマンティックトークンとスタイリングルールの構文の詳細については、セマンティック強調表示ガイドを参照してください。

独自のカラーテーマの作成

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

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

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

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

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

Web 用 VS Code でテーマをプレビューおよび共有する方法の詳細については、Web 用 VS Code ドキュメントを参照してください。

製品アイコンテーマ

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

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

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

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

既定では、VS Code にはDefaultという1つの製品アイコンテーマが付属しています。製品アイコンテーマピッカーで追加の製品アイコンテーマを参照...を選択すると、VS Code Marketplace からさらに製品アイコンテーマを選択できます。

次のステップ

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

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

07/09/2025