VS Code Hack: Easy Window Identification

VS Code has definitely become my tool of choice for everything from everyday editing of text and config files, to full web project development and testing. That said, I frequently find myself with a handful of VS Code windows open at any given time—bouncing between projects and trying to keep everything straight in my head (project X is on this screen, project Y is on that screen, etc). Then I discovered workspace theme overrides, and everything became 10x easier.

While you certainly can use VS Code sans-workspace, we’re going to use workspaces to brand VS Code to make windows easy to identify by the workspace they’re currently loaded with. Start by opening up VS Code, and use the File menu to add a folder to your workspace.

Note that our title bar has now changed to “Untitled (Workspace)” indicating that we have created a workspace, but haven’t saved it. Use the File menu to save your workspace, and the title bar will change to indicate the name of the workspace.

Now press Ctrl + Shift + P to bring up the command pallet. Search for “settings”, and select “Preferences: Open Workspace Settings”.

In the “Workspace Settings” tree menu, expand “Workbench” and select “Appearance”, then click the “Edit in settings.json” link under “Color Customizations”.

By default, your workspace settings will be blank. We’ll use the “Workspace Settings” tab of the right pane to add custom color customizations for this specific workspace.

You can take this as far as you want to, but I have generally found that coloring the activity bar on the far left side, and the border of the title bar are sufficient. To achieve this, modify the “settings” object to have a “workbench.colorCustomizations” object, and add any customizations that you wish.

Saving the Workspace Settings (File > Save, or Ctrl + S) will give you a real time preview of what you’ve added.

Once you’re happy, you can close the Workspace Settings, and Settings tabs, and you’re ready to use VS Code just like you normally would. Any time you open the workspace, you’ll get your branded sidebars (or whatever else you chose to add). A complete list of the theme color properties can be found here.