VSCode の見た目を少しカスタマイズしてみる

WindowsVSCode,Windows,カスタマイズ,テーマ,拡張機能Windows,Windows,カスタマイズ,テーマ,拡張機能

記事ヘッダー_VSCodeの見た目をカスタマイズ

前回の記事で VSCode をインストールしましたが、その流れで今回は見た目のカスタマイズをしてみます。出来るのか…??

VSCode の見た目をカスタマイズ

VSCode の外観が何処まで変更できるか…は、正直分かりませんが、とりあえずとして次の3つの変更にトライします。

背景を変更する

VSCode の背景に壁紙的なものを設置出来るようにしてみます。
これには拡張機能を利用しますが、今回は「background-cover」という拡張機能で試してみます。

「background-cover」のインストール

拡張機能のタブを開き、「background-cover」を検索しインストール。

「background-cover」のインストール
「background-cover」のインストール

「background-cover」の設定

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

「background-cover」の設定を開く
「background-cover」の設定を開く

各設定項目の意味は下記。

Add directory

仕様的な順番で「Add directory」から設定開始。

先程の設定項目から「Add directory」を選択すると次のようなフォルダー選択画面が表示されるので、背景画像が保存されているフォルダー(ディレクトリ)を選択する。

Add directory - フォルダー選択
Add directory – フォルダー選択

「Add directory」を設定しておくと、「Select pictures」や「ON start replacement」の設定時に「Add directory」で指定されたフォルダーが基準とされるようになる。

Select pictures

背景画像を切り替える。

「Add directory」が指定されている場合、切り替える画像をディレクトリ内の画像ファイルから選択できる。

Select pictures - 画像ファイルの選択
Select pictures – 画像ファイルの選択

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

Select pictures - ランダム切り替え
Select pictures – ランダム切り替え

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

Select pictures - 画像ファイルを指定して切り替え
Select pictures – 画像ファイルを指定して切り替え
Background opacity

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

Background opacity - 透過度の指定
Background opacity – 透明度の指定

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

Background opacity - Opacity ranges = 0
Background opacity – Opacity ranges = 0

1の場合。

Background opacity - Opacity ranges = 1
Background opacity – Opacity ranges = 1
Input : path/https

「Select pictures」の「Manual selection」と同様、切り替える画像をフルパスかURLで直接指定できる。

Closing background

背景画像が非表示になる。

Closing background - 背景を消す
Closing background – 背景を消す
ON/OFF start replacement

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

ON start replacement - VSCode起動時の背景ランダム機能
ON start replacement – VSCode起動時の背景ランダム機能

VSCode を透過させる

続いて VSCode を透過させてみます。
拡張機能は「GlassIt-VSC」を使用。

「GlassIt-VSC」のインストール

拡張機能のタブを開き、「background-cover」を検索しインストール。

「GlassIt-VSC」のインストール
「GlassIt-VSC」のインストール

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

「GlassIt-VSC」のインストール直後
「GlassIt-VSC」のインストール直後

「GlassIt-VSC」の設定

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

「GlassIt-VSC」の設定を開く
「GlassIt-VSC」の設定を開く
「GlassIt-VSC」の設定
「GlassIt-VSC」の設定

設定項目は2つ。

  • Transparency level
    1~255 の範囲で透明度を指定。(1:透明、255:不透明)
  • Increment of alpha
    ショートカットキーで透明度を変化させる際の変化量。

そして透明度の設定を誤ると VSCode が見えなくなる可能性があるので、ショートカットキーも書いておきます。

透明度を変更するショートカットキー
透明度を上げるCtrl+Alt+z
透明度を下げるCtrl+Alt+c

配色テーマを変更する

最後に配色テーマを変更してみます。

配色テーマの設定

VSCode に登録されている配色テーマから選択すると切り替わる。

配色テーマの設定
配色テーマの設定

ライトテーマの雰囲気。

配色テーマ - Solarized Light
配色テーマ – Solarized Light

配色テーマを追加する

配色テーマは追加できます。

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

配色テーマの追加
配色テーマの追加

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

利用可能な配色テーマの一覧
利用可能な配色テーマの一覧

さいごに

外観を変更した VSCode
外観を変更した VSCode

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

じゃ、また次回~_(┐「ε:)_