Theme Colours for iconColour

[JP-Ellis]

It appears that the iconColour option doesn't support the use of theme colours, which is a bit of a shame I think. Would it be difficult to allow this (and possibly any other colour options).

For example:

    "todo-tree.highlights.customHighlight": {
        "BUG": {
            "background": "editorError.foreground",
            "foreground": "editor.background",
            "icon": "bug",
            "iconColour": "editorError.foreground",
            "gutterIcon": true
        },
        "FIXME": {
            "background": "editorWarning.foreground",
            "foreground": "editor.background",
            "icon": "flame",
            "iconColour": "editorWarning.foreground",
            "gutterIcon": true
        },
        "TODO": {
            "background": "editorInfo.foreground",
            "foreground": "editor.background",
            "icon": "tasklist",
            "iconColour": "editorInfo.foreground",
            "gutterIcon": true
        }
    }

[Gruntfuggly]

Yes, that's a bit rubbish. It should work the same as the other colours.

[Gruntfuggly]

I've just remembered why it can't use theme colours - the theme colours have no API to get the RGB values which is needed to generate the custom SVGs for the icons.

There is a hack in this thread: https://github.com/microsoft/vscode/issues/32813 which I'll see if it's possible to leverage...

[mbomb007]

Is there a way to choose the icon, at least? I noticed that @FIXME and @BUG have the generic icon, instead of the flame or bug icons, respectively. It would be nice if they could have nice icons, too.

[Gruntfuggly]

You can set the icon using

todo-tree.highlights.customHighlight: {
    "<tag>": {
        icon: "<whatever>"
    }
}

as shown above.

I can't tell if you are joking or not?

[mbomb007]

Ah, thanks. I missed that in the documentation. The wiki has nothing about it. Is there a list somewhere of what icons are available? All I've found so far are: check, bug, flame, beaker, tasklist.

[Gruntfuggly]

You can use octicons (see https://octicons.github.com/) or codicons (see https://microsoft.github.io/vscode-codicons/dist/codicon.html). If using codicons, specify them in the format "$(icon)", e.g. "$(bug)". For octicons, just use the name , e.g. "bug".

The wiki only covers search regex's. For everything else, it should be in the README.md or here: https://github.com/Gruntfuggly/todo-tree#todo-tree

[mbomb007]

Thanks. Is there a reason that "iconColour" doesn't work for Codicons, only for Octicons?

[Gruntfuggly]

It uses a node.js package to generate .svgs from the octicons, which can then be modified with a colour. Codicons are supported directly through VSCode, so there is no option unfortunately.

[Weasy666]

Just thinking loud...can you maybe use CSS to style the codicons?

[Gruntfuggly]

The API doesn't allow anything like that unfortunately.

[mbomb007]

If we wanted VS Code to add that functionality, where would we suggest that?

[Gruntfuggly]

You would need to add a feature request on the main vscode repository (https://github.com/microsoft/vscode/issues). I wouldn't expect it to happen though - it doesn't really fit with the way the rest of the API works. They don't expose raw CSS. The places where they do, it is quite tightly controlled (e.g. https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions).

Worth a try though. 😃

[mbomb007]

They wouldn't have to solve the issue with CSS. They could add some other solution. It's probably best if you add the issue, though, if you want it. I wouldn't be able to answer any questions they might have.

[Gruntfuggly]

Theme colours can now be used with codicons, so I'm going to close this.