テーマ

配色テーマ

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

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

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"

マーケットプレースからの配色テーマ

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

[その他の配色テーマを参照...] を選択して、配色テーマピッカーから VS Code マーケットプレースの配色テーマを直接選択できます。

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

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

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

同様に、OS がハイコントラスト配色に切り替えたかどうかを自動的に検出するには、window.autoDetectHighContrast 設定を使用できます。

配色が変更されたときに使用されるテーマをカスタマイズするには、設定エディターで優先されるライト、ダーク、およびハイコントラストテーマを設定できます。

• ワークベンチ: 優先ダーク配色テーマ - 既定値は [ダークモダン] です
• ワークベンチ: 優先ライト配色テーマ - 既定値は [ライトモダン] です
• ワークベンチ: 優先ハイコントラスト配色テーマ - 既定値は [ダークハイコントラスト] です
• ワークベンチ: 優先ライトハイコントラスト配色テーマ - 既定値は [ライトハイコントラスト] です

配色テーマをカスタマイズする

ワークベンチの色

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

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

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 を使用します。

事前構成済みの構文トークン ('comments'、'strings'、...) のセットは、最も一般的な構造で使用できます。さらに必要な場合は、TextMate テーマ色のルールを直接指定することで実行できます。

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

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

エディターのセマンティック強調表示

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

セマンティック強調表示のない "Tomorrow Night Blue" 配色テーマ

セマンティック強調表示のある "Tomorrow Night Blue" 配色テーマ

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

• 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 }
        }
    }
}

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

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

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

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

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

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

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

既定の配色テーマを削除する

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

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

ファイルアイコンテーマ

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

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

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

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

3. 目的のテーマを選択し、Enterキーを押します。

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

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

利用可能なテーマを見つけるには、VS Code マーケットプレースサイトを直接参照することもできます。

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

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

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

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

VS Code for the Web

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

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

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

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

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

3. 目的のテーマを選択し、Enterキーを押します。

既定では、VS Code には 1 つの製品アイコンテーマである [既定] が付属しています。[その他の製品アイコンテーマを参照...] を選択して、製品アイコンテーマピッカーから VS Code マーケットプレースの製品アイコンテーマをさらに選択できます。

次のステップ

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

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