🎨

iTerm2のANSI Colorsテーマを、VSCodeの統合ターミナルでも使う

2022/01/12に公開

VS Code

shell

iTerm2

tech

結論

ここから好きなの選んで、VSCodeのsettings.jsonにコピペせよ！

はじめに

iTerm2はANSI Colorsのプリセットを切り替えられるのがとても良いですよね。
しかも、インストールしなくても標準でいい感じのカラーテーマが8種類入ってます。
僕は特に「Pastel (Dark Background)」が気に入ってます。

せっかくなので、iTerm2で設定したお気に入りのカラーテーマを
VSCodeの統合ターミナルでも使いたいのであります。

VSCodeでのカラーテーマ設定

基本

VSCodeの場合、カラーテーマは「workbench.colorCustomizations」プロパティで設定しますが、その中でも「terminal.」で始まるプロパティが統合ターミナルの色の設定です。

ただ、iTerm2の色を1個ずつポチポチここに入れていくのは、不可能ではないけど面倒くさい。。。

簡単にコピペできる方法

Iterm2-color-schemes という非常に便利なサイトがあります。
https://iterm2colorschemes.com/

このWebサイトは本来、「iTerm2に設定するカラーテーマを探す」のが目的なのですが、
標準カラーテーマも「Builtin」で始まる名前で列挙されています。

Builtin Dark
Builtin Light
Builtin Pastel Dark
Builtin Solarized Dark
Builtin Solarized Light
Builtin Tango Dark
Builtin Tango Light

本当に凄いのはここから。
画面右上のボタンからGitHubリポジトリに飛ぶと、

なんとなんと、「Extra」として、X11・Mac標準ターミナル・Windows標準ターミナル・PuTTY・VSCode統合ターミナルなどなど、各種ターミナルエミュレーターに一発で設定できるフォーマットが揃っているではありませんか！！！

というわけで、vscodeディレクトリ内から目的のカラーテーマを探して、

僕の場合はBuiltin Pastel Dark.jsonを選んで、
VSCodeのJSON設定画面にコピペ！

settings.json

{
  "workbench.colorCustomizations": {
    "terminal.foreground": "#bbbbbb",
    "terminal.background": "#000000",
    "terminal.ansiBlack": "#4f4f4f",
    "terminal.ansiBlue": "#96cbfe",
    "terminal.ansiCyan": "#c6c5fe",
    "terminal.ansiGreen": "#a8ff60",
    "terminal.ansiMagenta": "#ff73fd",
    "terminal.ansiRed": "#ff6c60",
    "terminal.ansiWhite": "#eeeeee",
    "terminal.ansiYellow": "#ffffb6",
    "terminal.ansiBrightBlack": "#7c7c7c",
    "terminal.ansiBrightBlue": "#b5dcff",
    "terminal.ansiBrightCyan": "#dfdffe",
    "terminal.ansiBrightGreen": "#ceffac",
    "terminal.ansiBrightMagenta": "#ff9cfe",
    "terminal.ansiBrightRed": "#ffb6b0",
    "terminal.ansiBrightWhite": "#ffffff",
    "terminal.ansiBrightYellow": "#ffffcc",
    "terminal.selectionBackground": "#363983",
    "terminalCursor.foreground": "#ffa560"
  },

  // 他にも各種設定は書かれています
}

これで、綺麗なパステルカラーの季節になりました〜。

めでたしめでたし！

結論

はじめに

VSCodeでのカラーテーマ設定

基本

簡単にコピペできる方法

Discussion