複数ウィンドウの見分けづらさ
VS Codeで複数のフォルダを同時に開いていると, どのウィンドウがどのプロジェクトなのか分かりにくいと感じていました.
特にLinuxのウィンドウ切り替え画面やWindowsのタスクバーでは, 同じVS Codeアイコンが並びます. タイトルだけでも判別できますが, 作業中は視覚的な手がかりが少なく, 目的のウィンドウに移るまでに迷ってしまいます.
そこで, ワークスペースごとに控えめなアクセント色を割り当てるVS Code拡張機能を作りました.
最初の方針と違和感
最初は, エディタ背景も含めてウィンドウ全体の色を変える方針でした. 色が大きく変わるので, ウィンドウの識別性は高くなります.
ただし, コードを書く領域の背景色まで変わると, テーマ本来の読みやすさが崩れます. シンタックスハイライトとの相性もあり, 長時間使うには視認性の負担が大きいと感じました.
そのため, 現在の実装ではエディタ背景の変更を既定で無効にしました. 代わりに, タイトルバー, アクティビティバー, ステータスバー, タブの上線, サイドバーやパネルの境界線といった周辺UIだけを変えています.
実装した機能
ワークスペースごとに固定のアクセント色を割り当て, ダークテーマやライトテーマごとに用意したベース色へアクセント色を少量混ぜた色を workbench.colorCustomizations に書き込みます.
text● A project-name
この例では, A が色候補を区別するためのラベルで, project-name が開いているワークスペース名です.
このバッジをクリックすると Cycle Workspace Color が実行され, 現在のワークスペースだけ次の色候補へ切り替わります.
色が被る問題への対応
VS Code拡張APIでは, 現在開いているすべてのVS Codeウィンドウを安定して取得できません. そのため, 「今開いているウィンドウ同士で絶対に色が被らない」と断言する設計にはしませんでした.
代わりに, 保存済みの割り当てを見ながら, まだ使われていない候補を優先するようにしています. それでも色が近く見える場合は, ステータスバーのバッジをクリックするだけで次の候補に切り替えられます.
自動割り当てに任せる場合と, 手動で色を指定する場合の両方で, 同じコマンドから切り替えられるようにしました.
WindowsとLinuxの両対応
対象OSはWindowsとArch Linuxです. そのため, VS Code本体のCSSを書き換えるような方法や, OS固有のウィンドウ装飾に依存する方法は使っていません.
実装はVS Code拡張APIと workbench.colorCustomizations の範囲に収めています. これにより, WindowsでもLinuxでも同じ考え方で動かせます.
一方で, OSやテーマによって見え方が変わる部分もあります. そこで, 色だけに頼らず, ステータスバーの文字情報も併用する形にしました.
セキュリティ面で確認したこと
この拡張機能は, 外部通信, WebView, シェル実行, 任意コード実行を使っていません.
保存する情報は, ワークスペースを識別するためのURIと割り当てた色です. フォルダパスにはプロジェクト名やユーザー名が含まれるため, ローカルに保存されるプライバシー上の懸念としてREADMEとセキュリティレポートに明記しました.
また, ユーザーが入力する色はhex形式だけを受け付けます. 不正な設定や壊れた保存状態は握りつぶさず, 明示的に失敗させるようにしています.
使い方
拡張機能をインストールしてフォルダを開くと, 自動でワークスペース色が適用されます.
色が被って見える場合は, ステータスバーの識別バッジをクリックします. コマンドパレットから Cycle Workspace Color を実行しても同じです.
エディタ背景も変えたい場合は, 次の設定を有効にします.
拡張機能の表示名は Workspace Window Color Identifier ですが, 設定キーでは内部IDとして vscodeThemeChanger を使っています.
json{
"vscodeThemeChanger.applyEditorBackground": true
}
自動適用を止めて, 現在のワークスペースに適用済みの色も消したい場合は, Disable and Reset Workspace Color を実行します.
作ってみて
ウィンドウを見分けるための機能でも, 色を強くしすぎると日常的な読み書きの邪魔になります.
今回は, 識別性と読みやすさのバランスを取るために, コード領域ではなく周辺UIへ寄せました. 派手な見た目にするよりも, 毎日開きっぱなしにしても邪魔にならないことを優先した実装です.