Vscode: Icons are hard to see in selected states

[bpasero]

The new list/tree selection color in light theme does not work well for me. The dark blue color looks off compared to the (probably unchanged) focus color. And worse, I feel I can no longer see the twistie in this case:

[bpasero]

@misolori I think we should change the color of the twistie to white though, that is the same macOS seems to do:

[misolori]

@bpasero yes, would love to do this! I'll need to investigate how to do this, here's a quick mockup:

[bpasero]

@misolori looks good

[bpasero]

@misolori also looks like we need to take care of this guy:

[bpasero]

Also an issue for our octicons for extensions it seems:

[bpasero]

Just also noticed our Git actions in dark having a bad contrast now:

[misolori]

@bpasero I've got a branch misolori/light-theme-icons-selection that fixes majority of the issues:

However, I've only been able to fix these via CSS, which means they aren't future-proof as it requires specific CSS Rules for each icon (which doesn't work for extensions that use the list widget).

I think the solution would be better done via JS to specifically use the appropriate icon on selected items in the list widget (a little beyond what I can do at the moment). We can also think about applying the list.activeSelectionForeground on the icons when selected.

Thoughts?

[bpasero]

We can also think about applying the list.activeSelectionForeground on the icons when selected.

I think that is probably the right solution using the same webkit-mask trick we already use to allow to set the foreground color of activity bar icons.

/cc @joaomoreno

[misolori]

@joaomoreno would you be able to help out with this? I think we'd want to make all of the icons in the list widget use the webkit-mask trick so they're consistent.

[joaomoreno]

The only icons the tree has are: twistie and loading indicator. All other icons belong to the many users of the tree.

[misolori]

Made some progress on this, though I've ran into a few critical issues when I tried converting the icons into a -webkit-mask:

• This assumes that all list widget icons are non-images, which means contributions with avatars will break (i.e. github pr extension)
• This assumes that all icons are the same single color, which means multi-colored icons will visually break
• Adjusting the list widget actions (like search and scm list actions) touches other areas (editor toolbar) which means it forces those icons and contributions to also inherit the issues above

So I can make a PR that will fix the basic list widget icons that we own (twisties and loading indicator) but am unsure of how to solve the rest of the issues above.

[isidorn]

I think this is a bit better with the new icons.
Though maybe the contrast could still be better. So ping @misolori

[misolori]

Not much has changed in terms of color but since the icons are thin now they may be improved a bit:

We still need to do the heavy work by styling our icons dynamically that I'm hoping will happen after we update our icons.

[misolori]

Verification steps:

Ensure that the icons in the tree widget inherit the foreground color changes from their elements like so:

_Note: this does not include icons from contribution points like extensions + SCM actions_

[isidorn]

Awesome! The twistie is lovely

[bpasero]

Great 👍