Allow to theme the white color in the progress badge

[tweakimp]

I am currently building a theme and want to change the color of the clock that is white inside the yelloq circle. It's color is #ffffff and i changed all colorsettings in my theme file that had that hexcode to a different color, but the clock stays at #ffffff.

There is a foreground color option for numbers (and text in general i suppose) that i already changed, it looks like this:

[bpasero]

Happy for help if someone has ideas. The challenge is to make it possible to theme the white background of that progress icon (living in here).

It should leverage the activityBarBadge.foreground for the color that is currently white and activityBarBadge.background for the color that is currently blue.

/cc @aeschli

[tweakimp]

My proposal:
move away from an image to a unicode character like U+1F552 🕒

[raygervais]

@bpasero Question, how does one make the clock icon appear from repo version of Code? I'm currently working on this, but I need to figure out how to visually see the icon. Ideas?

[bpasero]

@raygervais e.g. open a very large git repository and click refresh from the git viewlet. Or install an extension.

[tweakimp]

@raygervais You can also just check for updates via right click on it and it will appear for a short time.

[svipas]

Also, you can download this extension Notification Tester and use "Show Progress Badge" command.

[tweakimp]

Is this still being worked on? "activityBarBadge.foreground" is not doing anything as far as I know.

[balent]

I believe it should be possible with few steps:

1. Convert the SVG icon from base64 to text (xml)
2. Inline it into the HTML
   1. Maybe with something like badge.innerHtml = "<svg><path fill="#fff""/></svg>"
3. Use CSS "fill" property to change color of icon to the "activityBarBadge.foreground"

[miguelsolorio]

If anyone is interested, here is the code pointer to where the badge indicator is set:

vscode/src/vs/workbench/browser/parts/compositeBarActions.ts

Line 212 in af39a4d

this.badgeContent = dom.append(this.badge, dom.$('.badge-content'));

vscode/src/vs/workbench/services/progress/browser/media/progressService.css

Lines 14 to 17 in af39a4d

	.monaco-workbench .progress-badge > .badge-content {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMiAyIDE0IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDIgMiAxNCAxNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTZjLTMuODYgMC03LTMuMTQtNy03czMuMTQtNyA3LTdjMy44NTkgMCA3IDMuMTQxIDcgN3MtMy4xNDEgNy03IDd6bTAtMTIuNmMtMy4wODggMC01LjYgMi41MTMtNS42IDUuNnMyLjUxMiA1LjYgNS42IDUuNiA1LjYtMi41MTIgNS42LTUuNi0yLjUxMi01LjYtNS42LTUuNnptMy44NiA3LjFsLTMuMTYtMS44OTZ2LTMuODA0aC0xLjR2NC41OTZsMy44NCAyLjMwNS43Mi0xLjIwMXoiLz48L3N2Zz4=");
	background-position: center center;
	background-repeat: no-repeat;

[miguelsolorio]

Verification steps:

Install the Notification Tester extension and run the Start Progress Badge command and modify the activityBarBadge.foreground color token via:

"workbench.colorCustomizations": {
        "activityBarBadge.foreground": "#ff0000"

}

The icon should now inherit the same color.