VSCodeで内蔵ターミナルだけIcebergにする

この記事はとあるサークルのOB/OGで行っているN代アドベントカレンダーの10日目です。

はじめに

私はターミナルとしてmacOS標準のTerminal.appを使用しており、そのカラーテーマとしてIcebergを愛用しているのですが、VSCodeの内蔵ターミナルはTerminal.appのテーマ設定など反映してくれません。VSCode拡張機能としてはIcebergテーマがあるのですが、エディタのシンタックスハイライトなどはDark Modernの方が好きなので使えません。
そこで、エディタなど基本的な部分はDark Modernテーマを用いつつ、ターミナル周りだけIcebergにする方法を紹介します。

TL;DR

本編

VSCodeでは各種の色設定を.vscode/settings.jsonや~/Library/Application Support/Code/User/settings.json（※macOSの場合）から行うことができます。試しに適当なフォルダを開いて

.vscode/settings.json

{
  "workbench.colorCustomizations": {
    "terminal.selectionBackground": "#ff0000"
  }
}

として内蔵ターミナルの適当な範囲を選択してみましょう。選択部分が真っ赤になります。

したがってVSCode全体ではDark Modernテーマを使用しつつ、ターミナル関連の色設定だけsettings.jsonで上書きすれば「ぼくのかんがえたさいきょうのてーま」が完成します。

となるとあとはIcebergの色設定を手に入れるだけ。これはIcebergテーマの拡張機能のリポジトリから入手できます。本記事執筆時点ではthemes/iceberg.color-theme.jsonのcolors.terminal***に相当する部分を~/Library/Application Support/Code/User/settings.jsonにコピペしましょう。

https://github.com/cocopon/vscode-iceberg-theme/blob/5cf998e8aa70b8604d3b875302f17890f8772178/themes/iceberg.color-theme.json#L220-L240

ただ、これだけではターミナルの背景色がDark Modernの色のままです。それはそれで悪くないのですが、背景色もIcebergにする場合は

"panel.background": "#161821",

という行を加えましょう。
これで冒頭に見せたようにIcebergの美しい色合いのターミナルをVSCodeでも使うことができます。

おわりに

VSCodeは、ターミナル以外もほとんどの部分の色をカスタマイズできます。好きな配色を設定して気持ちよくコーディングできる環境を整えてみてください。