VS Codeで配色テーマをカスタマイズするには：Visual Studio Code TIPS

選択範囲のハイライト色（背景色）の変更を例に、VS Codeで配色テーマをカスタマイズする方法を解説（workbench.colorCustomization項目）。

[かわさきしんじ，Insider.NET編集部]

連載「Visual Studio Code TIPS」

　Visual Studio Code（以下、VS Code）では配色テーマを指定することで、自分の好みに合った配色でVS Codeを使えるようになる。また、配色テーマそのままではなく、さらにそれをカスタマイズすることも可能だ。本稿では、選択範囲のハイライト色（背景色）を例に、配色テーマをカスタマイズする方法を示す。

	操作
配色テーマをカスタマイズ	workbench.colorCustomizations項目にカスタマイズ内容を列挙していく
選択範囲のハイライト色（背景色）を変更する	配色テーマのeditor.selectionBackground／editor.selectionHighlightBackground項目を指定する
配色テーマ「ごと」にカスタマイズする	workbench.colorCustomizations項目に配色テーマごとにカスタマイズ内容を列挙していく
配色テーマをカスタマイズする方法

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

　VS Codeでは配色テーマを、［ファイル］メニュー（macOSでは［Code］メニュー）の［基本設定］−［配色テーマ］を選択するか、コマンドパレットで［基本設定: 配色テーマ］コマンドを選択し、好みの配色テーマを指定することで変更できる。

コマンドパレットで「theme」などと入力して、［基本設定: 配色テーマ］コマンドを実行

▼

好みの配色テーマを選択する

配色テーマの選択

　これで自分の好きな配色でVS Codeを使えるようになる。ただし、その一部をさらにカスタマイズして、より自分の好きな配色にすることも可能だ。これには、ユーザー設定あるいはワークスペース設定（settings.jsonファイル）でworkbench.colorCustomizations項目の中に各項目を記述していく。つまり、settings.jsonファイルに以下のような構造で設定を記述していく。

{
  "workbench.colorCustomizations": {
    "設定項目": "その値"
  }
}

配色を変更するにはworkbench.colorCustomizations項目にその値を列挙していく

　このとき、VS Codeの新しい設定エディタでは編集できないので、［settings.json で編集］をクリックして、直接設定ファイルを編集する必要がある。

［settings.json で編集］をクリック

▼

settings.jsonファイルを直接編集する

配色を変更するにはsettings.jsonファイルを直接編集する必要がある

　なお、workbench.colorCustomizations項目以下に直接記述した内容は現在の配色テーマの設定よりも優先される。配色テーマごとに設定を変更する方法は後述する。

選択範囲のハイライト色（背景色）を変更する

　ここでは例として、選択範囲のハイライト色（背景色）を変更する方法を見てみよう。これには、workbench.colorCustomizations項目内に、editor.selectionBackground項目を記述すればよい。色は#RGB、#RGBA、#RRGGBB、#RRGGBBAA形式で記述する。以下の設定では、RGBA値が「#FF0000」になっているので、選択範囲の背景色（ハイライト色）が赤になる。

{
  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#FF0000"
  }
}

選択範囲のハイライト色を変更する例

　また、コード中にある、現在の選択範囲と同じテキストをハイライト表示するのに使われる色は、editor.selectionHighlightBackground項目を指定する。

{
  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#FF0000",
    "editor.selectionHighlightBackground": "#00FF00"
  }
}

選択範囲のテキストと同じテキストのハイライト色を変更する例

　上の設定を行った場合の画面表示例を以下に示す。

上の設定を行った場合のVS Codeの表示例

　これはAboutメソッドのシグネチャにある「public」をダブルクリックして選択しているところだ。そのため、その「public」がeditor.selectionBackground項目で指定した赤を背景色（ハイライト色）として表示されている。他の「public」はeditor.selectionHighlightBackground項目で指定した緑を背景色として表示されている。

配色テーマ「ごと」にカスタマイズする

　上で見た設定方法は、配色テーマに優先する。つまり、どんな配色テーマを選択しても、settings.jsonファイルに記述した色指定がそれらの設定を上書きする。そうではなく、特定の配色テーマの設定を上書きしたいという場合には、workbench.colorCustomizations項目にその配色テーマのエントリを作成して、そこに設定を記述していく。この場合、workbench.colorCustomizations項目は次のような構成になる。

{
  "workbench.colorCustomizations": {
    "[配色テーマ名]": {
      "設定項目": "その値"
    },
  }
}

配色テーマごとに配色をカスタマイズする場合のworkbench.colorCustomizations項目の構成

　例えば、筆者が常用している配色テーマである「Light+ (default light)」でのみ上記の設定を有効にするのであれば、次のように記述すればよい。

{
  "workbench.colorCustomizations": {
    "[Default Light+]": {
      "editor.selectionBackground": "#ff007f",
      "editor.selectionHighlightBackground": "#0000ff7f",
    },
  }
}

「Light+ (default light)」の選択範囲のハイライト色を変更する例

　このとき、設定エディタではIntelliSenseが効くので、配色テーマの名前を覚える必要はない。下の画像をよく見ると分かるが、配色テーマ名が「Light+ (default light)」と「Default Light+」と異なっている。このような場合が他にもあるかもしれないので、素直にIntelliSenseを使うのがよいだろう。

IntelliSenseでラクラク設定

---

　この他にもエディタの検索バーなどに入力した項目にマッチする項目のハイライト色を指定するeditor.findMatchBackground／editor.findMatchHighlightBackground項目など、workbench.colorCustomizations項目では多くの配色を指定可能だ。設定可能な項目については「Theme Color Reference」を参照されたい。

　また、エディタに表示されているプログラムコードの種類（コメント、キーワード、数値など）ごとにその文字色やスタイルを変更するにはeditor.tokenColorCustomizations項目を設定する。これについては「Visual Studio Codeの設定『虎の巻』：構文ハイライト／配色テーマ自作編」や「Color Themes」を参照されたい。

「Visual Studio Code TIPS」