Vscode: Support workspace projects under different colors in sidebar and tabs

[RobertoMalatesta]

• VSCode Version: Nightly
• OS Version: Any

Workspace feature is really useful as it is today, but could themes API be extended so to display different projects with different colors/nuances?

See:

It would be even better if tabs could have different colors, to resemble the project they belong to:

Thanks for all the beautiful code and the effort you put in this superb project.

Roberto.

[johnbrett]

I think this would be an awesome addition - one additional request I would have on this is that we could set colours, or underline to highlight a project's root, as when you have many they are hard to distinguish which is root at a glance, something like:

If this would be possible, I would be happy to work on a PR for this if someone could give me pointers!

[jpike88]

+1 on this. juggling projects in multi-root workspaces needs more distinction between the projects.

[spersico]

+1. This would be great!

[jpike88]

This is actually starting drive me insane, I think this should be given way more importance. I also think this color coding should show up in quick search results.

[malutanpetronel]

+1 Found this very important ! See Netbeans to find more details on how it works

[infoflocrm]

Yes really need this feature. .vscode setting should picked up in this case but its only works when you open as a folder not as workspace.

Tab color should be adjustable via .vscode settings in each project in workspace and one that does not have that settings should use default theme color settings, like same time with workspace folders we open files from ftp. Ftp files should use default settings. Thanks.

[logicbomb421]

Yeah this would make a huge difference for me as well. Would love to see this in an upcoming build!

[rjzheng]

+9001 this would be provide a much better dev experience!!

[RuiffCardoso]

I was looking for this as well, would be great for my multi-workspace setup.

[nhuesmann]

I could really use this for an app I'm currently working on, please make it happen MS!

[hdd1013]

+1

[schwab]

Found this while searching the same feature.

For a little context as to why this is so important... when debugging installed python packages with the launch setting "debugStdLib": true, the debugger automatically opens up files from your lib directory even though the breakpoint is set on your local file. This means you end up with files like ~.local/lib/python3.6/site-packages/... opened in what used to be just your local project. This allows debugging and stepping through the installed code which is probably good since it's possible the running files are different from your local dev project files, BUT when you decide to make a change to the code, you have remember to change over to the local files in the current project director, not the lib files. This Texas Two-Step (debugging one file, but having to change to the other file for editing) has made many a developer loose code changes since the next build/install overwrites the lib packages with local files you thought were edited.. Naturally, we want to edit the same file we found the bug in, right?

Well, if there was a way to set warning color on all ~.local/lib... files, then you'd at least have a visual indicator you're doing something bad.

So, here's my +1, though I wonder if this could be done through an extension. Continuing to search...

[lamnguyenx]

Hi there,

It'd be really wonderful if VSCode supports this feature! I've switched from Atom and planned to stay with VSCode in next 3 - 5 years ;)

[invasionofsmallcubes]

Absolutely agree, I'm having the same issue. I have some configuration files that are the same for different projects, it would be awesome to distinguish them in some way. (you can go with the mouse over the tab to see the path, but it's not really a direct approach).

[nicolashardy]

That would be awesome. Does anyone know a workaround in order to get this result?

[oreporan]

I've built a vscode extension that does exactly this (and a bit more)
Built for people who have monorepos or large projects and want to distinguish files/folders easily.

its called ColorTabs

It can color the tab/title-bar and add a label based on a regex that you provide

https://marketplace.visualstudio.com/items?itemName=orepor.color-tabs-vscode-ext

[schwab]

thank you @oreporan. Installed it and it's working great. In my case I set it up thusly:
"colorTabs.titleBackground": true, "colorTabs.config": [ { "regex": ".*/site-packages/.*", "color": "#dd3333", "label": "SITE-PACKAGES" } ]

Which turns my title bar Red when I'm editing a python site-packages files. Since those are overwritten by a build, this is a good way to prevent code loss. Have already shared with others on my team, they are all
:+1:

[oreporan]

Glad it works for you - didn't even think about that use-case! makes sense to add some label for build/, dir/ out/ etc!

Feel free to ⭐️ it in the marketplace if it helped you out :)

[malutanpetronel]

...
"colorTabs.config": [
{ "regex": "./site/app/.", "color": "#dd3333", "label": "app" },
{ "regex": "./site/src/.", "color": "#991111", "label": "src" }
]

for some reason, this config does not apply anymore...
However, somehow the site/app/* have all a red background at the top when opened which cannot be changed

[oreporan]

@malutanpetronel It would be better to post this under https://github.com/oreporan/color-tabs-vscode/issues/
But in your case, its probably that the regex is wrong, did you mean to do ".*/site/app/.*" ?

[malutanpetronel]

yes

[oreporan]

@malutanpetronel so did changing the regex work for you? if not you can open an issue and I'll take a look, though its pretty straight forward, if the file/folder matches the regex, it will work

[malutanpetronel]

something not ok... now even if I uninstall colortabs extension, the title bar remains red

[oreporan]

the extension changes the color by modifying the titleBar
Go to workspace settings and look for workbench.colorCustomizations
You can delete that line completely

[eine]

I think this would be an awesome addition - one additional request I would have on this is that we could set colours, or underline to highlight a project's root, as when you have many they are hard to distinguish which is root at a glance, something like:

Ref #74229.

I've built a vscode extension that does exactly this (and a bit more)
Built for people who have monorepos or large projects and want to distinguish files/folders easily.

It can color the tab/title-bar and add a label based on a regex that you provide

Ref #76399.

[LucaGabi]

please also read this feature request here: #95182 in my opinion it is similar request with less clutter