Quickly differentiate between code bases with VScode Window colors

Introduction

When working on a project as a developer, it's not uncommon to have multiple windows open, whether that's working in tandem in separate back end and front end code base's or referring to a past piece of work for guidance on implementing a feature. I often work with Vue and Laravel in two separate windows, Vue controlling my front end and Laravel my back end. I am constantly switching between windows, particular when working on a single screen, throw in a browser and a design and things get rather confusing rather quickly. There is a better way.

The better way

Window colors to the rescue! Window colors is a VS code extension that allows you to assign custom window title bar colors to your projects making them instantly distinguishable. Not only will colors be visible when the window is open, but windows in your dock will also sport the custom title bar color.

To find the Window colors extention, search for window colors in the VS code extensions panel.

Setting up window colors

Search for and install window colors in the VS code extensions panel or find it here. Once Window colors is installed the extension will add 3 color settings to the .vscode/settings.json file, using unique colors based on a hash of the root directory name. Those color settings are: activityBar.background, titleBar.activeBackground and titleBar.activeForeground. 

By default, the title bar colors will only be present if the window is active, however you can ensure the colors persist even when the window is inactive by simply adding 2 more settings: titleBar.inactiveBackground, titleBar.activeForeground.

Preferences

You may choose to have a unique custom color for each of your codebases, however, as I mentioned in the introduction, a common use case for me is working with Vue and Larvel on a single project, across 2 code bases, front and back end. Therefore my preference is set to each code base to represent the predominant framework, for example red (#F05304) for Laravel and green (#42B883) for Vue, I also prefer to remove the activityBar.background setting:

Laravel codebase settings:

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#F05340",
        "titleBar.activeForeground": "#FFFFFFFF",
        "titleBar.inactiveBackground": "#F05340",
        "titleBar.inactiveForeground": "#FFFFFFFF"
    }
}

Vue codebase settings:

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#42B883",
        "titleBar.activeForeground": "#FFFFFF",
        "titleBar.inactiveBackground": "#42B883",
        "titleBar.inactiveForeground": "#FFFFFF"
    }
}

Conclusion

A simple change can sometimes make a huge difference, and for me, adding custom window colors to my code base's has been one of those times. Hopefully custom window colors will help improve your workflow as well.

If you've found this article useful, please give it a clap and follow me Here, Medium, and/ or Twitter.