Help us understand the problem. What is going on with this article?

vscodeの拡張機能background-coverの背景画像をもっと明るく表示する方法

More than 1 year has passed since last update.

今回はvscodeの背景にカバー画像を表示可能な background-cover の背景画像を明るく表示する方法を紹介したいと思います。
ダウンロードして試してみた方はわかるかもしれませんが、デフォルトで使用すると結構暗めです。
これはこれで遠目で見た場合に目立たないので良いのですが、どうせ使うなら画像をもっと目立つようにしたいですよね。
before.jpg

こんな感じに明るくします。

after.jpg
まだインストールしていない方は vscodeの背景にカバー画像を表示できる拡張機能background-coverについて を参考にしてください。

背景画像の調整方法

1. 明るくする上で邪魔になる部分のCSSを上書きする

vscodeは workbench.colorCustomizations を使ってsettingsから動的にカラーを変更できるのですが、厄介なことに明るさの変更に影響する部分は変更ができません。明るくするには本体のCSSを修正する必要があります。
と言いたいところですが background-cover はCSSを追記して動く仕組みなので、カスタマイズはここに追加して行きます。こうすることでVSCODE本体がアップデートした際、すぐカスタマイズのCSSを復活させることが可能なのです。

vscodeの拡張機能の場所

  • Windows:%USERPROFILE%¥.vscode¥extensionsフォルダ
    例:「C:¥Users¥<ユーザー名>¥.vscode¥extensions」フォルダ
  • Linux:~/.vscode/extensionsフォルダ
    例:「/home/<ユーザー名>/.vscode/extensions」フォルダ
  • macOS:~/.vscode/extensionsフォルダ
    例:「/Users/<ユーザー名>/.vscode/extensions」フォルダ

getCss.js内の/*ext-${extName}-end*/の前に2行追記する

※CSSとして解釈できない記述をすると画面がおかしくなる可能性があるので注意してください。
明らかにおかしくなった場合は、本体のworkbench.main.cssの追記された部分を削除する再インストール(設定は無事)で治ります。

~/.vscode/extensions/manasxx.background-cover-1.0.0/out/getCss.js
return `
    /*ext-${extName}-start*/
    /*ext.${extName}.ver.${version}*/
    body{
        background-size:cover;
        opacity:${opacity};
        background-image:url('${imagePath}');
    }
    .monaco-workbench{background:none !important;} /* workbench.colorCustomizationsを機能させるために必須 */ 
    .monaco-workbench .panel.integrated-terminal{opacity:0.8} /* ターミナル部分も癖があるので直接透過する */
    /*ext-${extName}-end*/
`;

2. 背景のカラーを調整する

workbench.colorCustomizations を使って調整します。
テーマを修正しても良いのですが、 workbench.colorCustomizations の設定で変えるとリアルタイムで色味が変化するので調整がしやすいです。

最低限調整が必要なのは3つ

RGBA(8桁)の16進数カラーコードで調整します。A(最後の2桁)は0に近づくほど透過する割合が高いです。

  • editor.background - エディタの背景
  • sideBar.background - サイドバーの背景
  • panel.background - コンソールエリアの背景 ※ここはRGBA(8桁)ではなくRGB(6桁)で指定

※ちなみにpanel.backgroundRGB指定にするのはターミナルに残念な仕様があるためです。
RGBAで透過設定をするとターミナル部分が黒くなり変な余白ができるので綺麗な調整ができません。
aaa.jpg

実際のコードがこんな感じです。

settings.json
    "workbench.colorCustomizations": {
        "[Visual Studio Dark]": {
            "editor.background": "#00000044",
            "sideBar.background": "#000000AA",
            "panel.background": "#111111",
        },
        "[Visual Studio Light]": {
            "editor.background": "#FFFFFF55",
            "sideBar.background": "#FFFFFFCC",
            "panel.background": "#FFFFFF",
        }
    }

このようにテーマで色を分けることもできます。
※テーマの種類は[]内でctrl + spaceを押すとインストールされてるものから入力補完で選択できます。

ランダムの機能で背景を切り替えた場合、画像によってはコードの視認性悪くなることもあります。エディタが少し見づらいと思ったらeditor.backgroundの後ろ2桁を単純に44→66(暗くする)にするとかで調整するといいと思います。

66.png
モニターによっても見え方が変わるので色々お試しください。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away