前回の記事で VSCode をインストールしましたが、その流れで今回は見た目のカスタマイズをしてみます。出来るのか…??
VSCode の見た目をカスタマイズ
VSCode の外観が何処まで変更できるか…は、正直分かりませんが、とりあえずとして次の3つの変更にトライします。
背景を変更する
VSCode の背景に壁紙的なものを設置出来るようにしてみます。
これには拡張機能を利用しますが、今回は「background-cover」という拡張機能で試してみます。
「background-cover」のインストール
拡張機能のタブを開き、「background-cover」を検索しインストール。

「background-cover」の設定
VSCode 右下に「background-cover」のボタンが追加されるのでこれを押すと…、設定可能な項目が表示される。

各設定項目の意味は下記。
- Select pictures
画像の切り替え(Add directory が未指定の場合、画像を直接指定) - Add directory
画像が保存されているフォルダー(ディレクトリ)を指定 - Background opacity
画像の透明度を 0.00~1.00 の範囲で指定 - Input : path/https
画像をフルパス/URLで指定 - Closing background
背景画像を非表示 - ON/OFF start replacement
VSCode 起動時の背景画像ランダム表示機能の有効無効(Add directory が設定されてる場合)
Add directory
仕様的な順番で「Add directory」から設定開始。
先程の設定項目から「Add directory」を選択すると次のようなフォルダー選択画面が表示されるので、背景画像が保存されているフォルダー(ディレクトリ)を選択する。

「Add directory」を設定しておくと、「Select pictures」や「ON start replacement」の設定時に「Add directory」で指定されたフォルダーが基準とされるようになる。
Select pictures
背景画像を切り替える。
「Add directory」が指定されている場合、切り替える画像をディレクトリ内の画像ファイルから選択できる。

「Random pictures」を選んだ場合は、切り替える画像が「Add directory」で指定されたフォルダーからランダムで選択される。

「Add directory」が未指定だったり「Manual selection」を選んだ場合は、切り替える画像をフルパスかURLで直接指定できる。

Background opacity
背景画像の透明度を指定できる。

ちなみに Opacity ranges による変化具合を確認。0の場合。

1の場合。

Input : path/https
「Select pictures」の「Manual selection」と同様、切り替える画像をフルパスかURLで直接指定できる。
Closing background
背景画像が非表示になる。

ON/OFF start replacement
ON の場合は、VSCode のウィンドウが起動される都度、「Add directory」に指定したフォルダーから画像がランダムに切り替えられる。

VSCode を透過させる
続いて VSCode を透過させてみます。
拡張機能は「GlassIt-VSC」を使用。
「GlassIt-VSC」のインストール
拡張機能のタブを開き、「background-cover」を検索しインストール。

インストールが完了で早速透明化されました。

「GlassIt-VSC」の設定
「GlassIt-VSC」の設定画面は拡張機能タブの歯車等から開けます。


設定項目は2つ。
- Transparency level
1~255 の範囲で透明度を指定。(1:透明、255:不透明) - Increment of alpha
ショートカットキーで透明度を変化させる際の変化量。
そして透明度の設定を誤ると VSCode が見えなくなる可能性があるので、ショートカットキーも書いておきます。
透明度を変更するショートカットキー
透明度を上げる | Ctrl+Alt+z |
透明度を下げる | Ctrl+Alt+c |
配色テーマを変更する
最後に配色テーマを変更してみます。
配色テーマの設定
VSCode に登録されている配色テーマから選択すると切り替わる。

ライトテーマの雰囲気。

配色テーマを追加する
配色テーマは追加できます。
配色の選択の際、下の方にある「その他の色のテーマをインストール…」を選びます。

すると、拡張機能のタブに移り、VSCode で利用できる配色テーマが表示されます。
ここからインストールすることで追加出来るようです。(テーマ以外にアイコンなんかも表示されている)

さいごに

というわけで、拡張機能を駆使して VSCode の外観デザインを変えてみました。
これで Windows Terminal (以前の記事を書いた時に外観変えた)とのギャップが埋まりそうです。
じゃ、また次回~_(┐「ε:)_
コメント