DEV Community

Cover image for VSCode Custom Colors Per A Project
CodingWith-Adam
CodingWith-Adam

Posted on

2

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:

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay