カラースキーム

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 を使ってテーマの色を調整し終えたら、いよいよ実際のテーマを作成します。

コマンドパレットから Developer: Generate Color Theme from Current Settings コマンドを使用して、テーマファイルを生成します。
VS Code の Yeoman 拡張機能ジェネレーターを使用して、新しいテーマ拡張機能を生成します。
```
npm install -g yo generator-code
yo code
```
上記のようにテーマをカスタマイズした場合は、「Start fresh」を選択してください。
設定から生成されたテーマファイルを、新しい拡張機能にコピーします。

既存の TextMate テーマを使用することもできます。拡張機能ジェネレーターに TextMate テーマファイル (.tmTheme) をインポートするように指示し、VS Code 用にパッケージ化します。あるいは、すでにテーマをダウンロード済みの場合は、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 設定やカラーテーマ定義ファイルでコード補完を使用する際にも表示されます。ユーザーは、拡張機能の拡張機能のコントリビューションタブで、その拡張機能が定義している色を確認できます。

さらに読む

CSS Tricks - VS Code テーマの作成

5/28/2026