Zenn
🎨

プロジェクトごとにVSCodeの色をカスタマイズする

2022/02/19に公開
VS Code
idea

VSCodeで複数プロジェクトを開いていると、「あれ、このコード、どのプロジェクトだっけ？」となるので、プロジェクトごとに色を変えてわかりやすくしてみました。

前提

  • macOSを使っています

ワークスペースの設定

  • VSCodeを起動し Code ＞ Preferences ＞ Settings をクリックして設定画面を開いてください
  • Workspace タブを開いてください

  • 設定画面で color と検索し、Workbench > Appearance をクリックしてください
  • Workbench: Color Customizationsで Edit in settiongs.json をクリックします
  • settings.json が開きます

このsettings.jsonを変更することでカスタマイズができます

VSCode上部 タイトルバーの色を変える

settings.json
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000", // タイトルバーの背景色
    "titleBar.activeForeground": "#ffffff", // タイトルバーの文字色
  }
}

VSCode下部 ステータスバーの色を変える

settings.json
{
  "workbench.colorCustomizations": {
    "statusBar.background": "#0000ff", // ステータスバーの背景色
    "statusBar.foreground": "#ffffff", // ステータスバーの文字色
  }
}

VSCode左部 アクティビティバーの色を変える

settings.json
{
  "workbench.colorCustomizations": {
    "activityBar.background": "#008000", // アクティビティバーの背景色
    "activityBar.foreground": "#ffffff", // アクティビティバーの文字色
  }
}

アクティビティバーのバッチの色を変える

settings.json
{
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#ffff00", // アクティビティバーのバッチ背景色
    "activityBarBadge.foreground": "#000000", // アクティビティバーのバッチ文字色
  }
}

タブの色を変える

settings.json
{
  "workbench.colorCustomizations": {
    "tab.activeBackground": "#ffc0cb",   // 表示されているタブの背景色
    "tab.activeForeground": "#000000",   // 表示されているタブの文字色
    "tab.inactiveBackground": "#000000", // 表示されていないタブの背景色
    "tab.inactiveForeground": "#ffffff"  // 表示されていないタブの文字色
  }
}

エディタの背景色を変える

settings.json
{
  "workbench.colorCustomizations": {
    "editor.background": "#f8f8ff", // エディタの背景色
  }
}

他の設定項目

  • 他にも設定できる項目があります
  • VSCodeのドキュメントを参照ください

https://code.visualstudio.com/api/references/theme-color

.vscode/settings.jsonをgit管理したくない場合

  • 全てのプロジェクトで .vscode/settings.json をgit管理しないようにするためには ~/.config/git/ignore にgit管理したくないファイルを追加します
$ mkdir -p ~/.config/git
$ echo .vscode/settings.json >> ~/.config/git/ignore
  • ~/.gitignore_global にgit管理したくないファイルを追加するという記事もありますが、デフォルト値は ~/.config/git/ignore らしいです

Its default value is $XDG_CONFIG_HOME/git/ignore. If $XDG_CONFIG_HOME is either not set or empty, $HOME/.config/git/ignore is used instead.

https://git-scm.com/docs/gitignore

Discussion