Feature request: highlight problem indicator with color when problems exist

[poshcodebear]

• VSCode Version: 1.10.2
• OS Version: Windows 7 SP 1 & Windows 10

For a better callout (those icons aren't very noticeable normally), it would be nice if when there are errors or warnings detected, it highlighted the respective icon (yellow for warning, red for error).

[lashchev]

+1

[stevencl]

I don't know if this is possible, perhaps @sandy081 knows?

[sandy081]

@poshcodebear Not sure if I understand the request correctly. May I know what icon you would like to highlight?

[poshcodebear]

Absolutely. Rather than trying to describe it, I've made a couple of screenshots (using PowerShell to create the sample).

The icons I'm referring to:

Showing them with some errors and warnings (note: they're easy to miss as only the numbers change):

A really bad, quick mockup of a way to make them stand out better (changing their color when they detect issues and errors):

I hope that makes more sense.

[DragWx]

This would be nice. Instead of changing the color of the icon and number, maybe change the background color behind the indicator instead? It would stand out more and would be easier to read than color-on-color.

[poshcodebear]

This would be nice. Instead of changing the color of the icon and number, maybe change the background color behind the indicator instead? It would stand out more and would be easier to read than color-on-color.

So, something like this?

I re-did my original mockup with better colors as well for a more direct comparison:

The red is still a bit hard to see in the icon color only changes, so probably should have picked a slightly darker red.

[DragWx]

Something like that, yeah, but thinking some more on it, being able to customize both would be helpful.

[usernamehw]

Not the best option but it's possible to hack it: Custom CSS

.task-statusbar-item-label-warning.mask-icon:not([title='0 Warnings']) {
    background-color: orange !important;
}
.task-statusbar-item-label-error.mask-icon:not([title='0 Errors']) {
    background-color: crimson !important;
}

[poshcodebear]

Not the best option but it's possible to hack it: Custom CSS

.task-statusbar-item-label-warning.mask-icon:not([title='0 Warnings']) {
  background-color: orange !important;
}
.task-statusbar-item-label-error.mask-icon:not([title='0 Errors']) {
  background-color: crimson !important;
}

I gave that a try and not only did that not work, it caused me to need to reinstall VSCode to undo and get it to stop warning me about an unsupported install. For anyone thinking to try this, I don't recommend it.

[usernamehw]

Yeah, class names are not stable... Current code is:

.statusbar-item[title*="Warning"]>a>.codicon-warning {
    color: #ff7300 !important;
}

.statusbar-item[title*="Error"]>a>.codicon-error {
    color: #dd4653 !important;
}

Unsupported install you can click Don't show again once a month, idk.

[sandy081]

@misolori Is it possible now to theme these icons? Is there a general issue for theming icons?

[miguelsolorio]

We added color tokens for the problem icons but they do not carry into the status bar. See https://code.visualstudio.com/updates/v1_40#_icon-color-tokens.

[vscodebot[bot]]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our [documentation](https://aka.ms/vscode-issue-lifecycle). Happy Coding!

[bradzacher]

My (crappy) interim solution was to create an extension: https://marketplace.visualstudio.com/items?itemName=bradzacher.vscode-coloured-status-bar-problems It works like a charm, apart from the manual step to hide the existing statusbar item.

At the time, I did a bunch of digging in to how vscode works here. The problem is that vscode is designed such that each item can only have one colour assigned to it. Because the errors/warnings status bar icon is a single item, it can only have one colour assigned to the text.

[vscodebot[bot]]

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our [documentation](https://aka.ms/vscode-issue-lifecycle). Happy Coding!