はじめに
公式ページで、テーマカラーのカスタマイズができることを知ったので、愛用のvscodeを自分好みにカスタマイズしてみました。
デフォルトで用意されているテーマカラー
vscodeの設定から、テーマカラーを変えることができます。
設定から検索バーで、「color theme」と打つと、一番上に出てきた選択欄から配色テーマを変えることができます。

Default Dark+

Default Light+

Solarized Dark

MYテーマカラー
Default Dark+をベースに、カスタマイズしてみました。青が好きなので、青を多めに使いました。また選択している箇所は、強調して見えるようにしたかったので、赤紫色にしてみました。

下記のファイルを、setting.jsonに貼り付けることで、適用できます。もしこの配色が気に入った人はぜひ適用してみてください!
setting.json
"workbench.colorCustomizations": {
// アクティビティバー
"activityBar.background": "#021d5269", // アクティビティバーの背景色
"activityBar.foreground": "#ffffff", // アクティビティバーの前景色
"activityBar.border": "#646464", // アクティビティバーの境界線
// サイドバー
"sideBarSectionHeader.background": "#373746", // サイドバーセクションヘッダーの背景色
"sideBarSectionHeader.border": "#8db3ff46", // サイドバーセクションヘッダーの境界線の色
"sideBar.background": "#292931", // サイドバーの背景色
"sideBar.foreground": "#a0a0a0", // サイドバーの前景色
"sideBar.border": "#646464", // サイドバーの境界線
"list.activeSelectionBackground": "#2c88d377", // アクティブな状態のセクションの背景色
"list.focusBackground": "#2c88d377", // フォーカス状態のセクションの背景色
"list.hoverBackground": "#193c5877", //ホバー状態のセクションの背景色
// ヘッダー、タブ
"editorGroupHeader.tabsBackground": "#2929316e", // ヘッダーの背景色
"tab.activeBackground": "#0319464f", // アクティブタブの背景色
"tab.border": "#8db3ff46", // タブの横線
"tab.inactiveBackground": "#2929316e", // 非選択タブの背景色
// エディター
"editor.selectionBackground": "#cc25a265", // 選択領域の強調色
"editor.lineHighlightBackground": "#9e99ee11", // 選択している行の強調色
"editorLineNumber.foreground": "#a2bdddbb", // 選択行番号の文字色
"editorBracketMatch.background": "#2c88d377", // 対応する括弧の背景色
// ステータスバー
"statusBar.background": "#23468b", // ステータスバー背景色
"statusBar.foreground": "#ffffff", // ステータスバー前景色
"statusBar.border": "#646464", // ステータスバー前景色
// スクロールバー
"scrollbarSlider.background": "#0d478a99", // スクロールバーの色
// walcomeページ
"welcomePage.background": "#2231419c"
},
こんな感じで、下に貼り付けるだけで、適用できます。あとは、さらに自分好みにカスタマイズしてみてください。
