VSCodeのカラーテーマの詳細をカスタマイズする方法

カラー設定のカスタマイズ方法

VSCodeのカラーテーマのカスタマイズの方法は以下の通りです。

まず、 ⌘ + , で設定画面（Settings）を出します。

一番上にある検索ボックスで「color」と入力します。「Workbench: Color Customization」というセクションがあるので「Edit in settings.json」をクリックします。

エディターが出てくるので「workbench.colorCustomizations」という設定を追加します。ユーザ設定を変更する場合は「USER SETTINGS」、Workspaceごとにカスタマイズする場合は「WORKSPACE SETTINGS」のタブに設定を加えます。

他に何も設定が入っていない場合は、以下を丸々追加するとアクティブなタブの下にボーダーを入れることができます。

{
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

僕の場合は、すでにいくつか設定を変更していたので以下のようになりました。

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Monokai",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
	"editor.minimap.enabled": false,
  "workbench.editor.tabSizing": "shrink",
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

設定変更後

設定を変更した後は以下のような見た目になりました。デフォルトよりはマシなんじゃないかなぁ、とw