🚀 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"
  }
}

この設定は、「comments」、「strings」、「numbers」などの一般的なトークンタイプのセットを備えたシンプルなモデルをサポートしています。それ以上の色付けを行いたい場合は、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 ウィンドウにライブで適用されます。

Extension Marketplace へのテーマの公開

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

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

VS Code Marketplace で拡張機能を魅力的に見せる方法に関する推奨事項もあります。「Marketplace Presentation Tips」を参照してください。

新しい Color ID の追加

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

参考文献

04/03/2025