Custom Title Bar Colors for VS Code

README.md

Custom Title Bar Colors for VS Code

A simple tool that changes your VS Code's Title Bar Colors depending on the type of workspace that you're currently in. Useful for Full-Stack developers who like to jump from workspace to workspace.

Setup Instructions

1. Open your terminal and cd into your root directory (e.g. cd ~, or cd /Users/YOURNAME/)
2. Create a new folder named bin if you don't have one yet
3. Export your bin directory to the PATH (e.g. for bash: export PATH=$PATH:/Users/YOURNAME/bin, for ZSH: export PATH=$HOME/bin:/usr/local/bin:$PATH)
4. Copy the two files vs-fe and vs-be into your bin directory
5. Give executable persmissions to both files (chmod u+x vs-fe vs-be)
6. Now in VSCode, open your settings (Ctrl + , or Cmd + ,) and in the search box, type "title"
7. Uncheck the box for "Window: Native Tabs" if you have one
8. Set "Window Titlebar Style" to "Custom".
9. Restart VSCode
10. Setup is done.

Usage Instructions

1. cd into your selected workspace
2. Run vs-fe for your Front-End workspace, and run vs-be for your Back-End workspace
3. Watch them title bars color change

Additional Notes

• This might not be as useful on monolithic sites (Wordpress, Drupal, etc), but you can still try it, but I imagine the setup's gonna be a tad more difficult. I don't know, I didn't try.
• You can also use and modify these to customize your workspaces. For example, if you want to create separate settings for a Wordpress workspace, you can create a vs-wordpress executable and modify the colors as you see fit.

vs-be

#!/bin/bash
mkdir .vscode
cd .vscode
cat <<END >settings.json
{
    "workbench.colorCustomizations": {
        "titleBar.activeForeground": "#000",
        "titleBar.inactiveForeground": "#000000CC",
        "titleBar.activeBackground": "#FF2C70",
    "titleBar.inactiveBackground": "#FF2C70CC"
    }
}
END

vs-fe

#!/bin/bash
mkdir .vscode
cd .vscode
cat <<END >settings.json
{
    "workbench.colorCustomizations": {
        "titleBar.activeForeground": "#000",
        "titleBar.inactiveForeground": "#000000CC",
        "titleBar.activeBackground": "#FFC600",
        "titleBar.inactiveBackground": "#FFC600CC"
    }
}
END