Visual Studio Code 痛ターミナル化

VScodeのターミナルの背景画像を設定する。

バージョンによってDOM構造が変わるようで、これまでいくつか紹介されていた方法ではうまくいかなかったので修正したものを共有します。(version 1.34で確認)

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css
に以下を追加

workbench.main.css

.monaco-workbench .part.panel:after {
    content: '';
    background: url("/path/to/hoge.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    background-position: right;
    opacity: 0.2;
    pointer-events: none;
}

ファイル変更後、VSCodeをリロードすることで適応される。

参考:
https://qiita.com/chado/items/3dafb263e912bf78f4bf

[おまけ] サイドパネルのディレクトリツリー背景も設定

workbench.main.css

.explorer-folders-view:after{
    content: '';
    background: url("/path/to/bar.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    background-position: bottom;
    opacity: 0.12;
    pointer-events: none;
}