Codicon icons aren't colored by foreground/background value

[redactedscribe]

When specifying a codicon as an icon, e.g. "icon": "$(info)", the resulting icon shown in the sidebar is not colored according to the foreground/background color.

If I'm not mistaken, the project's README does not state that they don't support these colors, but rather that theme colors only work when using codicons.

Should the foreground/background colors be affecting codicons?

Thanks.

[Gruntfuggly]

When the extension was originally written codicons didn't exist - Code was still using octicons. There is a node package which provides octicons as SVGs (which is what Code uses for custom icons) that can be coloured. So originally, octicons could be chosen and have custom colours (but not theme colours, as Code doesn't provide access to the actual colour definitions).

When codicons were introduced, I added support for them, but codicons only support theme colours, which is better in some ways because it means you shouldn't end up with dark icons on a dark background, for example.

So to answer your question - no. I will update the README.md to make it clearer (it has evolved over time) and I guess it should probably generate a warning if you try and use non-theme colours with codicons.

[Gruntfuggly]

I have considered dropping support for octicons, but you can't use codicons in the gutter at the moment, so I've kept them. Unfortunately, it makes it all a bit confusing.

[redactedscribe]

codicons only support theme colours

I don't have a good understanding of what theme colors actually are, but I'm assuming it's a single color definition that would apply to all the different Todo Tree tag icons? I.e. no red for BUG and blue for TODO icons? Currently, a codicon named $(run-view-icon) that I have set for BUG looks to be using the default editor text color.

[Gruntfuggly]

Theme colours are named references to the colours that Code uses, e.g. "statusBar.background". If you specify that as the icon colour, it will use whatever colour is defined by the current colour theme you are using.

So, for the bug example, you might want to use "problemsErrorIcon.foreground".

The idea is that if you change the overall theme it will still do something sensible.

The problem with theme colours though, is that the underlying definition is not available to the API. Some features, e.g. the gutter icon still need the extension to specify an actual colour (e.g. #FF0000) or use the colours defined in the icon (SVG) itself, so these don't work with the theme, which is a shame. There aren't many places though.

[redactedscribe]

During configuration I noticed that rulerColour doesn't support theme colors, despite the README saying it's configurable as per foreground/background colors.

[redactedscribe]

A foregroundOpacity setting might be nice for defining all foreground RGB/hex values at once, rather than having to maintain RGBA values for example. Hopefully the opacity of colors read from theme colors will be settable one day too.

Since codicon icons don't support anything but theme colors, maybe some color could be added to the TODOs sidebar via an option to color the listed strings? Currently it's all gray and samey for me. This would strike a middleground so that all the icons can remain the default color (presumably icon.foreground), but but the colored strings serve as a color identification method.

My use case right now is: foreground in RGBA, background in RGB, both with their opacities tamed and mirroring the theme colors. This is so that the text isn't as harsh on my eyes. icons set to the product icons. rulerColour set via theme color since it's not as distracting (currently broken, see last post). The last piece of the puzzle is adding some color to the TODOs sidebar list, hence the request to color the strings.

[Gruntfuggly]

Unfortunately there is no API to colour the text. It would be nice though. You could try opening a feature request in the main Code repository, but I doubt it will get anywhere sadly.

[Gruntfuggly]

BTW - good spot on the ruler colour - it does support theme colours, but it was broken.

[redactedscribe]

That's a shame. I guess I'll have to live with it (or just use octicons until things change).

Thanks for your help 🙂