VSCode different Theme setting for each project in a WorkSpace

When I build backend and frontend with the same language, JavaScript, I find it very hard to distinguish between both. Is there any way to have different themes for each project in the workspace? for example change the file association for the frontend to show React logo instead of the default JavaScript logo (I use Material Icon Theme)

"material-icon-theme.files.associations": {
        "*.js": "react"
        // HOW CAN I MAKE THIS APPLY FOR THE FRONTEND PROJECT ONLY?
    },

using the .jsx for frontend is not a good option as it will require extra work when importing things, also not all of my frontend files uses React.js. And I will lose a lot of snippets.

Solution

I have written the extension When File that allows you to change workbench colors based on the file path.

Read the extension page for the possible use cases.

An example if you have one folder open in VSC

  "whenFile.change": {
    "/server/": {
      "workbenchColor": {
        "activityBar.background": "#509050"
      }
    },
    "/client/": {
      "workbenchColor": {
        "activityBar.background": "#905080"
      }
    }
  }