Visual Studio Code - 配色テーマの変更とカスタマイズ

配色テーマの変更

VSCode の配色テーマは、[ファイル] - [ユーザー設定] - [配色テーマ] から変更できます。ショートカットキーで [Ctrl] + [K] [Ctrl] + [T] を入力しても変更できます。

デフォルトの配色テーマは「Dark (Visual Studio)」に設定されています。カーソルキーを使用して配色テーマのプレビューを見ながら、好みのテーマを選択します。例えば、以下は「Light+ (既定の Light)」を選択したプレビュー例です。

アクティブな配色テーマは、ユーザ設定に保存されます。設定を開くには、ショートカットキーで [Ctrl] + [,] を入力します。そして、以下の設定を検索するとワークベンチで使用される配色テーマが表示されます。

// ワークベンチで使用される配色テーマ
workbench.colorTheme

デフォルトでは、いくつかの配色テーマが用意されていますが、それ以外の配色テーマを使いたい場合は、その他の配色テーマをインストールします。その他の配色テーマをインストールするには、拡張機能ビュー ([Ctrl] + [Shift] + [X]) の検索ボックスに「theme」と入力します。

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

ユーザ設定を使用することで配色テーマのカスタマイズを行うことができます。ユーザ設定を開くには、ショートカットキーで [Ctrl] + [,] を入力します。そして、以下の設定を検索するとワークベンチで使用される配色テーマが表示されます。

// 現在選択している配色テーマで配色を上書きする
workbench.colorCustomizations

カスタマイズできる要素については、以下のカラーテーマガイドを参照してください。