VSCode の見た目を少しカスタマイズしてみる
前回の記事で VSCode をインストールしましたが、その流れで今回は見た目のカスタマイズをしてみます。出来るのか…？？
VSCode の見た目をカスタマイズ
VSCode の外観が何処まで変更できるか…は、正直分かりませんが、とりあえずとして次の３つの変更にトライします。
背景を変更する
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 （以前の記事を書いた時に外観変えた）とのギャップが埋まりそうです。
じゃ、また次回～_(┐「ε:)_