Zenn
🐈

[Macユーザ向け]VSCodeのタイトルバー表示をWorkSpace毎に切り替える

2021/05/27に公開
VS Code
idea

はじめに

背景

個人的に、複数のディレクトリを別々に開くことがよくある
なぜなら・・・

  • 開発中のプロダクトはGitHubでバージョン管理している
  • 開発中のプロダクトはフロント・バックエンド・その他などいくつかのGitHubリポジトリに分かれている

別々に開いた時に、見分けづらいことがある。特に同じようなディレクトリ構成だと。なので改善したいと思った。
タイトルバーだけ変えるといい感じだと思ったのでやってみた。
やり方が整理できたのでブログ化することにした。

before

after

前提

Macユーザ向けの記事です

事前準備（任意）

Ditigal Color Meterを使わずにHTMLカラーコードが用意できるのであれば無視してください。

Ditigal Color MeterでHTMLカラーコードを簡単に取れる設定にしておきます。

  • [表示] - [値を表示] - [16進]にチェック
  • 「汎用のRGBを表示」を選択

やりかた

使う色を決める

設定する色をHTMLカラーコードで用意します。
以下で、Digital Color Meterを使った方法を紹介します。

  • Digital Color Meterを開く
  • 適当な画像を探す
  • 画像にポイントして command + shift + c
    • クリップボードに #510086 みたいなフォーマットで値が入る
    • 【注意】Digital Color Meterにフォーカスがあたった状態で command + shift + c してください

今回はgoogleで「野菜」を検索して、夏野菜サラダの配色にしてみました。自然のものはなんか配色がいい感じになるのでいいですね（適当）

  • ナス： #464661
  • ピーマン： #1E5701
  • トマト： #EF2F36

Workspace（ワークスペースの設定）の設定を書く

  • json形式で編集する画面に切り替える
    • [Code] - [Preferences] - [Settings]を開く
    • 「Workspace」タブを選択し、切り替えアイコンをクリック

タイトルバーの色を設定

以下のような形式でtitleBarの背景、文字色を設定します。

（例）
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#31647A",
    "titleBar.activeForeground": "#fff",
  }  
}

ちなみにこの辺りの設定方法はここに書いてあります
→https://code.visualstudio.com/api/references/theme-color#title-bar-colors

You can customize your active Visual Studio Code color theme with the workbench.colorCustomizations user setting.

{
 "workbench.colorCustomizations": {
   "activityBar.background": "#00AA00"
 }
}

全部のWorkspaceに設定します。夏野菜サラダができました。

まとめ

  • 以下でワークスペース毎にタイトルバーを設定できる

    • Workspace毎に以下を設定
      • workbench.colorCustomizations.titleBar.activeBackground
      • workbench.colorCustomizations.titleBar.activeForeground
    （例）
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#31647A",
    "titleBar.activeForeground": "#fff",
  }  
}

  • Digital Color Meterを使うとHTMLカラーコードが簡単にキャプチャできる

  • タイトルバー以外も色々変更できる

参考

Discussion