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. 上記で説明したようにテーマをカスタマイズした場合は、「新規から開始」を選択します。

    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

テーマファイルの変更は、Extension Development Host ウィンドウにリアルタイムで適用されます。

拡張機能マーケットプレースにテーマを公開する

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

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

VS Code Marketplace で拡張機能を魅力的に見せる方法についても推奨事項があります。Marketplace 表示のヒントを参照してください。

新しいカラー ID の追加

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

関連情報

08/07/2025