Visual Studio Code: different color themes for different projects

Question

I have 2 Visual Studio Code instances with two different projects.

Is there a way to make VS Code instances' themes different from each other depending on the project?

Answer 1

// Specifies the color theme used in the workbench.

"workbench.colorTheme": "...……….",

If you put that into your "WORKSPACE SETTINGS" and not "USER SETTINGS" then you will get different themes for each workspace. When you open your setting Ctrl-, (that's a comma), then above the right-hand editor you will see "USER SETTINGS" and "WORKSPACE SETTINGS", chose the workspace settings and then click on the pencil icon to the left of the workbench.colortheme setting to change it.

---

If you don't want to change your whole theme just to quickly differentiate workspaces, try some combo of these settings in your WORKSPACE SETTINGS:

"workbench.colorCustomizations": {

  "activityBar.background": "#f00", 
  "titleBar.activeBackground": "#f00",
  "statusBar.background": "#f00"
}

Answer 2

You can use a great VS Code extension called Peacock developed by John Papa.

Answer 3

This worked for me. in each project folder create a .vscode subfolder if it doesn't already exist. In each folder create a separate settings.json file. in this file paste in the following:

for example my front end gives me a yellow title bar:

{
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#000",
    "titleBar.inactiveForeground": "#000000CC",
    "titleBar.activeBackground": "#ffc600",
    "titleBar.inactiveBackground": "#ffc600CC"
  },
  "appService.zipIgnorePattern": [
    "node_modules{,/**}",
    ".vscode{,/**}"
  ]
}

for backend i use this which gives me a red title bar:

{
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#000",
    "titleBar.inactiveForeground": "#000000CC",
    "titleBar.activeBackground": "#eb2568",
    "titleBar.inactiveBackground": "#eb2568CC"
  },
  "appService.zipIgnorePattern": [
    "node_modules{,/**}",
    ".vscode{,/**}"
  ]
}