[FEATURE] - Allow to define a Project color

[thomasfrobieter]

I dont know if Vscode allows to define the background color of status bar items:

	{
		"name": "Drupal 9 > Base Theme",
		"rootPath": "$home\\Projects\\drowl-base-theme",
		"paths": [],
		"tags": [
			"+Drupal",
			"+Gitlab"
		],
		"enabled": true,
		"color": "#ff0000"
	},

Or maybe change the color of the whole status bar? https://code.visualstudio.com/api/references/theme-color

[alefragnani]

Hi @thomasfrobieter ,

There is no API to define color for items in the Side Bar, unfortunately.

About the Status Bar, I wound’t change its color, since VS Code itself (and themes) uses different Status Bar colors to define project states. As a possible alternative, it would be possible to define the background and/or foreground color of the item in the Status Bar. Would it work for you?

Hope this helps.

[l-e-e-o]

Regarding the side bar: maybe you could do something like the Projects extension - they simply use colored icons.

[thomasfrobieter]

About the Status Bar, I wound’t change its color, since VS Code itself (and themes) uses different Status Bar colors to define project states. As a possible alternative, it would be possible to define the background and/or foreground color of the item in the Status Bar. Would it work for you?

Definitely! :)

Regarding the side bar: maybe you could do something like the Projects extension - they simply use colored icons.

Ouh yes, thank you, this looks pretty interesting, too!

[UrielCh]

Hi,

I'm using peacock to identify, my project that would be nice to be able to show the project color in this extention.

for now I can use emoji:

🔴 Red Circle: This emoji represents the color red.
🟠 Orange Circle: This emoji represents the color orange.
🟡 Yellow Circle: This emoji represents the color yellow.
🟢 Green Circle: This emoji represents the color green.
🔵 Blue Circle: This emoji represents the color blue.
🟣 Purple Circle: This emoji represents the color purple.
🟤 Brown Circle: This emoji represents the color brown.
⚫ Black Circle: This emoji represents the color black.
⚪ White Circle: This emoji represents the color white.

+1

[FiB3]

I wanted to ask for a similar thing.
Maybe this will help to somebody? I am setting the .vscode.settings.json with following (I change colors for each project):

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#0011ff",
        "titleBar.activeForeground": "#ffffff",
        "statusBar.background": "#0011ff",
        "statusBar.foreground": "#ffffff"
    }
}

Out of the box support would be nice though.

[alefragnani]

Hi,

Looking closer to this feature, since I'm playing with #299, it seems we should have a small issue with icon colors. I still have to properly confirm this, but it is almost certain it works this way.

In order to be able to define colors to individual projects, I see two alternatives today:

• The color to be applied to the project name only, remaining the current themeable icon untouched (if you use any File Icon Theme at all)
• The color to be applied also to the icon, but it means it won't respect the File Icon Theme you are using.

This happens because Themeable Icons doesn't support color values using hex / rgb, but only via named values, like the one you customize via workbench.colorCustomizations.

Hope this helps

[KarimGhallab]

Hi everyone, having faced a similar issue myself my building a vscode extension i thing i can provide some help here.
One way to bypass this limitation of VScode's API regarding colored treeview item is to provide your own icons instead of using VScode built-in one.
Basically, you can provide your own svg content to the property TreeItem.iconPath. To do so, you need to encore your SVG data in a specific format.
I think i could try to do it and open a PR if it's ok for (i haven't contributed to this project yet).