Background: I am working developing a number of Express.js micro services and at times I have two or three VSCode windows opened at once. After a long day it gets confusing which project I am working on.
To solve this I found out that you can change the colours of the top and bottom bars. Now each of the projects is colour coded and reduces my cognitive load a little bit.
In VSCode create a folder called .vscode an in that a file called settings.json. For the above dark green and off white colour scheme
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#1d7e05",
"titleBar.activeForeground": "#e1dcdc",
"titleBar.inactiveBackground": "#1d7e05",
"titleBar.inactiveForeground": "#e1dcdc",
"statusBar.background": "#1d7e05›",
"statusBar.foreground": "#e1dcdc"
}
}Top Tip
Don’t make the colours too bright or you will get “after image” which is a bit off putting.