CODEWITHSUNDEEP
visual-studio-code
edmond
edmond

Reputation: 1592

Visual Studio Code: different color themes for different projects

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?

Upvotes: 39

Views: 18988

Answers (3)

JJ_Coder4Hire
JJ_Coder4Hire

Reputation: 4891

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{,/**}"
  ]
}

enter image description here

Upvotes: 14

Mark
Mark

Reputation: 180649

// 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"
}

Upvotes: 50

Prateek Kumar Dalbehera
Prateek Kumar Dalbehera

Reputation: 2574

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

Upvotes: 42

Related Questions