Workspace Colors

Automatically color your VS Code UI based on which folder your current file belongs to.

This helps you visually distinguish multiple projects open in a single VSCode window — ideal for monorepos or multi-root workspaces with apps like api, app, admin, adopt, etc.

✨ Features

• 🎨 Automatically updates the title bar and activity bar colors
• 🔍 Based on the folder name found in the active file path
• 📁 Supports multiple folders using .vscode/settings.json per project
• ✅ Works in multi-root workspaces (recommended)

⚙️ Usage

1. Add a .vscode/settings.json file to each of your projects with the color you want:

Example: api/.vscode/settings.json

{
  "workspaceColors.folders": {
    "api": "#FF4B4B"
  }
}

app/.vscode/settings.json

{
  "workspaceColors.folders": {
    "app": "#9B59B6"
  }
}

adopt/.vscode/settings.json

{
  "workspaceColors.folders": {
    "adopt": "#F1C40F"
  }
}

2. Open all projects in a multi-root workspace:

   • In VS Code, click File > Add Folder to Workspace…
   • Add each project (api, app, adopt, etc.)
   • Save the workspace as my-workspace.code-workspace

3. When you open a file from any folder, the UI color will change accordingly 🎯

💡 Tips

• Colors are applied globally (user settings) so they persist across sessions.
• Folder match is case-insensitive and partial — if the folder name is found in the file path, it will trigger.
• The extension reads each folder’s .vscode/settings.json at runtime and merges all workspaceColors.folders.

📦 Installation

Coming soon on the VSCode Marketplace

For now, you can install it manually with:

vsce package
code --install-extension workspace-colors-0.0.1.vsix

🛠️ Requirements

• VS Code v1.85.0 or higher
• Workspace opened with multiple folders (multi-root recommended)

🧪 Known Limitations

• Only updates color when changing the active editor.
• It does not support single-folder mode unless that folder defines the color in .vscode/settings.json.

🧑‍💻 Author

@battoni

📜 License

MIT