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

配色テーマの変更

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

配色テーマの変更
配色テーマの変更

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

配色テーマの変更
配色テーマの変更

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

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

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

その他の配色テーマをインストールする
その他の配色テーマをインストールする
外部リンク

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

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

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

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

外部リンク

カラーフォーマット

色の値は、透明度のアルファチャネルを含む RGB カラーモデルで定義できます。形式として、以下の表記がサポートされています。

  • #RGB
  • #RGBA
  • #RRGGBB
  • #RRGGBBAA

R (赤)、G (緑)、B (青)、および A (アルファ：透明度) は 16 進数で表されます。3 桁の表記（#RGB）は 6 桁の形式（#RRGGBB）の省略した表記です。同様に 4 桁の RGB 表記（#RGBA）は 8 桁の形式（#RRGGBBAA）の省略した表記です。例えば #e35f は #ee3355ff と同じ色です。

アルファ値が省略された場合、デフォルトで ff (不透明) になります。もしも透明にする場合はアルファ値に 00 を指定します。

関連記事