VS Codeのエージェントモードを拡張するには、を試してください！

カラーテーマ

Visual Studio Code のユーザーインターフェースに表示される色は、2つのカテゴリに分類されます

  • ワークベンチの色は、アクティビティバーからステータスバーまで、ビューやエディターで使用されます。これらの色の完全なリストは、テーマカラーリファレンスにあります。
  • 構文の色とスタイルは、エディター内のソースコードに使用されます。これらの色のテーマ設定は、構文の色分けがTextMateグラマーとTextMateテーマ、およびセマンティックトークンに基づいているため、異なります。

このガイドでは、テーマを作成するためのさまざまな方法について説明します。

ワークベンチの色

新しいワークベンチカラーテーマを作成する最も簡単な方法は、既存のカラーテーマから開始してカスタマイズすることです。まず、変更したいカラーテーマに切り替えてから、設定を開き、workbench.colorCustomizations設定を変更します。変更はVS Codeインスタンスにライブで適用されます。

例えば、以下はタイトルバーの背景色を変更します

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}

テーマ設定可能なすべての色の完全なリストは、カラーリファレンスにあります。

構文の色

構文の強調表示色には、2つのアプローチがあります。コミュニティから既存のTextMateテーマ（.tmThemeファイル）を参照することも、独自のテーマ設定ルールを作成することもできます。最も簡単な方法は、上記のワークベンチの色のセクションと同様に、既存のテーマから開始してカスタマイズすることです。

まず、カスタマイズするカラーテーマに切り替え、editor.tokenColorCustomizations設定を使用します。変更はVS Codeインスタンスにライブで適用され、更新や再読み込みは不要です。

例えば、以下はエディター内のコメントの色を変更します

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}

この設定は、「コメント」、「文字列」、「数値」などの一般的なトークンタイプが利用可能なシンプルなモデルをサポートしています。それ以上に色付けしたい場合は、TextMateテーマルールを直接使用する必要があります。これについては、構文強調表示ガイドで詳しく説明されています。

セマンティックな色

セマンティックな強調表示は、VS Code 1.43リリースでTypeScriptとJavaScriptに対して利用可能です。間もなく他の言語でも採用される予定です。

セマンティックな強調表示は、言語サービスからのシンボル情報に基づいて構文の色付けを豊かにします。これにより、プロジェクトのより完全な理解が得られます。色付けの変更は、言語サーバーが実行され、セマンティックトークンが計算された後に表示されます。

各テーマは、テーマ定義の一部である特定の設定によって、セマンティックな強調表示を有効にするかどうかを制御します。各セマンティックトークンのスタイルは、テーマのスタイリングルールによって定義されます。

ユーザーは、editor.tokenColorCustomizations設定を使用して、セマンティックな強調表示機能と色付けルールをオーバーライドできます

特定のテーマのセマンティックな強調表示を有効にする

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
},

テーマは、構文強調表示ガイドで説明されているように、セマンティックトークンのテーマ設定ルールを定義できます。

新しいカラーテーマの作成

workbench.colorCustomizationsとeditor.tokenColorCustomizationsを使用してテーマの色を調整したら、いよいよ実際のテーマを作成します。

  1. コマンドパレットから開発者: 現在の設定からカラーテーマを生成コマンドを使用してテーマファイルを生成します

  2. VS CodeのYeoman拡張機能ジェネレーターを使用して、新しいテーマ拡張機能を生成します

    npm install -g yo generator-code
yo code

  3. 上記のようにテーマをカスタマイズした場合は、「Start fresh」を選択します。

    yo code theme

  4. 設定から生成されたテーマファイルを新しい拡張機能にコピーします。

また、拡張機能ジェネレーターにTextMateテーマファイル（.tmTheme）をインポートさせ、VS Codeで使用できるようにパッケージ化することで、既存のTextMateテーマを使用することもできます。または、すでにテーマをダウンロードしている場合は、tokenColorsセクションを使用する.tmThemeファイルへのリンクに置き換えます。

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}

ヒント: 色の定義ファイルに-color-theme.jsonというサフィックスを付けると、編集時にホバー、コード補完、カラーデコレーター、カラーピッカーが利用できるようになります。

ヒント: ColorSublimeには、何百もの既存のTextMateテーマがあります。気に入ったテーマを選び、ダウンロードリンクをコピーしてYeomanジェネレーターで使用するか、拡張機能に組み込みます。その形式は"https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"のようになります。

新しいカラーテーマのテスト

新しいテーマを試すには、F5キーを押して拡張機能開発ホストウィンドウを起動します。

そこで、カラーテーマピッカーをファイル > 基本設定 > テーマ > 配色テーマで開き、ドロップダウンリストに自分のテーマが表示されます。上下矢印キーでテーマのライブプレビューを確認できます。

select my theme

テーマファイルへの変更は、拡張機能開発ホストウィンドウにライブで適用されます。

拡張機能マーケットプレイスへのテーマの公開

新しいテーマをコミュニティと共有したい場合は、拡張機能マーケットプレイスに公開できます。vsce公開ツールを使用してテーマをパッケージ化し、VS Codeマーケットプレイスに公開します。

ヒント: ユーザーがあなたのテーマを見つけやすくするには、拡張機能の説明に「theme」という単語を含め、package.jsonでCategoryをThemesに設定します。

また、VS Codeマーケットプレイスで拡張機能を魅力的に見せるための推奨事項もあります。マーケットプレイスの表示に関するヒントを参照してください。

新しい色のIDの追加

色のIDは、色のコントリビューションポイントを通じて拡張機能によっても提供されます。これらの色は、workbench.colorCustomizations設定とカラーテーマ定義ファイルでコード補完を使用する際にも表示されます。ユーザーは、拡張機能が定義する色を拡張機能の貢献タブで確認できます。

関連情報

07/09/2025