VSCode Custom Colors Per A Project

Learn this great productivity tip to quickly identify different VS Code windows(projects). If you have ever worked on several projects you know that it can be pain to quickly identify different open VS Code windows when they all look the same. By applying a distinct color to either the title bar, side bar or status bar you can quickly identify different projects at a glance.

For example, if you are working on a backend and frontend project you can add a splash of color to the side bar to quickly find the correct project.

To add color to individual VS Code projects we use the workspace settings to apply custom colors to various aspects of the VS Code window.

Vs Code has 2 types of settings user and workspace. User settings are global and apply to all VS Code windows. Workspace settings apply to individual projects.

Most settings can be configured in the settings menu for user and workspace. As soon as a workspace settings is added through the VS Code GUI it will create a .vscode folder and settings.json file below that.

The manual process to add workspace settings is as follows. Create a .vscode folder in the root of the VSCode project. In that folder place a settings.json file. Guided by intellisense add customizations.

For more details check out the following video: