Visual Studio Code - 配色テーマの変更とカスタマイズ
配色テーマの変更
VSCode の配色テーマは、[ファイル] - [ユーザー設定] - [配色テーマ] から変更できます。ショートカットキーで [Ctrl] + [K] [Ctrl] + [T] を入力しても変更できます。
デフォルトの配色テーマは「Dark (Visual Studio)」に設定されています。カーソルキーを使用して配色テーマのプレビューを見ながら、好みのテーマを選択します。例えば、以下は「Light+ (既定の Light)」を選択したプレビュー例です。
アクティブな配色テーマは、ユーザ設定に保存されます。設定を開くには、ショートカットキーで [Ctrl] + [,] を入力します。そして、以下の設定を検索するとワークベンチで使用される配色テーマが表示されます。
// ワークベンチで使用される配色テーマ
workbench.colorTheme
デフォルトでは、いくつかの配色テーマが用意されていますが、それ以外の配色テーマを使いたい場合は、その他の配色テーマをインストールします。その他の配色テーマをインストールするには、拡張機能ビュー ([Ctrl] + [Shift] + [X]) の検索ボックスに「theme」と入力します。
- Basic Editing in Visual Studio Code - Color Themeshttps://code.visualstudio.com/docs/getstarted/themes
配色テーマのカスタマイズ
ユーザ設定を使用することで配色テーマのカスタマイズを行うことができます。ユーザ設定を開くには、ショートカットキーで [Ctrl] + [,] を入力します。そして、以下の設定を検索するとワークベンチで使用される配色テーマが表示されます。
// 現在選択している配色テーマで配色を上書きする
workbench.colorCustomizations
カスタマイズできる要素については、以下のカラーテーマガイドを参照してください。
- Basic Editing in Visual Studio Code - Theme Colorhttps://code.visualstudio.com/api/references/theme-color
カラーフォーマット
色の値は、透明度のアルファチャネルを含む RGB カラーモデルで定義できます。形式として、以下の表記がサポートされています。
#RGB#RGBA#RRGGBB#RRGGBBAA
R (赤)、G (緑)、B (青)、および A (アルファ：透明度) は 16 進数で表されます。3 桁の表記（#RGB）は 6 桁の形式（#RRGGBB）の省略した表記です。同様に 4 桁の RGB 表記（#RGBA）は 8 桁の形式（#RRGGBBAA）の省略した表記です。例えば #e35f は #ee3355ff と同じ色です。
アルファ値が省略された場合、デフォルトで ff (不透明) になります。もしも透明にする場合はアルファ値に 00 を指定します。