はじめに

※20/1/8追記
新しくVSCodeのターミナルの背景を変更する記事を書きました！
今度はtabごとに画像を変えたり、split機能で分割されたターミナルにそれぞれ画像を当てたりしています！
詳しくはこちら！
【 Visual Studio Code 】痛ターミナル化計画　そのに！

今回に至るまでの流れ

「VSCodeを痛くしたい、でもいったいどうすればいいんだ！」
workbench.colorCustomizationsを用いた痛Visual Studio Code化計画
「cssをいじるだけで背景を変更できるのか。これ、ターミナルもいじれないかな。」

というわけでやってみた

その1 cssファイルを探そう!

まずVSCodeを起動します（こいつを起動しなきゃ何も始まらないからね）

タブの「ヘルプ」→「開発者ツールの切り替え」を順にクリックしてデベロッパーツールを有効化
デベロッパーツールを駆使してcssファイルの場所を探しましょう

\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css
にありますね
レッツ、オープン！

？？？？
わけわかめ

その2 ターミナルの要素を探そう！

どうせ中身はcssなんだ、上書きすれば問題なし！

ということで次はターミナル背景をいい感じにつけられそうな要素を探しましょう！
探す方法は簡単！ターミナルの要素に片っ端からbackground-colorを突っ込んでいくだけ！
背景の色が変わればそれがあたりなのだ！

ターミナルの要素多くね・・・？

その3 cssを調整しよう！

いろいろ試した結果、どうやら「xterm-link-layer」という id classの付いた要素がよさそう
※18/3/9追記
3/8の更新で、上記の要素がclassに変更されました。~~投稿して1日で使用不可とか･･･~~

という訳で早速いろいろcssを直当てしてみよう

手元の画像がペンギンしかねぇ･･･
しかも、上に被っちゃって文字がみえねぇ･･･
もぅﾏﾁﾞ無理。透過しよ･･･

うむ、いい感じ

その4 変更を保存しよう！

調整が終わったらworkbench.main.cssの末尾に調整したcss

css

/*呪文の最後に記述*/
.xterm-link-layer {
  opacity: 0.1;
  background-image: url(痛画像URL);
  background-size: cover;
/*他調整内容*/
}

と入力して上書き保存、再起動して反映されていれば完成！
※workbench.main.cssを上書きするときは管理者で保存してください。

まとめ

これを応用すれば、ターミナル以外の箇所も自分好みに作り変えられる！
みんなも自分だけのVSCodeを作ってみよう！

ふと思ったんだけど、あらかじめ透過した画像を使うならもう少し別の方法があったかも？

※注意点

リンクレイヤーに画像をはめているため、ターミナルに表示されるリンクの下線が消えます。
それでも問題ない、という人だけ適用してください。

※18/3/7追記
VSCodeのウィンドウを拡縮した際にターミナルの文字が非表示になることがあります。
発生した場合は、一度ターミナルを開きなおすことで解消されるようです。（CTRL+@）
※18/3/8追記
VSCodeをアップデートすると、workbench.main.cssがリセットされます。
再度cssを上書きしてください。

※18/3/9追記
3/8の更新で、xterm-link-layer要素がidからclassに変更されました。

※19/5/30追記
VSCodeのversionが1.34になったことでDOM構造に変更があったようです。
1.34対応版はこちら
https://qiita.com/moritanian/items/fb444c13f2f799cf0959

※20/1/08追記
新しくターミナル背景設定記事を書きました！
【 Visual Studio Code 】痛ターミナル化計画　そのに！