How can I make the colour for a function definition to differ from that of a function call in VS Code?

How can I make the colour for a function definition/declaration to differ from that of a function call?

For example, in JavaScript

function foo() { foo(); }
// make the first "foo" red and the next one green.

Use the Developer: Inspect Editor Tokens and Scopes command in the command palette.

With semantic highlighting, look to see if either definitions have a specific modifier, or calls. With VS Code's builtin JavaScript extension, definitions have the declaration modifier, so one can do this like so:

"editor.semanticTokenColorCustomizations": {
    "[name of colour theme]": { // optionally wrap in colour theme block to apply customizations to only one colour theme
        "rules": {
            "function.declaration:javascript": {
                "foreground": "#FF0000", // TODO
            },
            "function:javascript": {
                "foreground": "#00FF00", // TODO
            },
        },
    },
},

You can find docs on semantic highlighting here: https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide.

With token customizations, just see what token customizations are available. Sometimes things just might not allow you to customize them differently. Ex. (I think) if both definitions and calls have a common "top-priority" scope. I tried to get something working for JavaScript but I think it ran into that issue. Here's my attempt for that just to give an idea of what it might look like:

"editor.tokenColorCustomizations": {
    // optionally enclose this with a colour theme block to only apply to one theme
    "textMateRules": [
        {
            "scope": "meta.definition.function.js",
            "settings": {
                "foreground": "#FF0000", // TODO
            },
        },
        {
            "scope": "meta.function-call.js",
            "settings": {
                "foreground": "#00FF00", // TODO
            },
        },
    ],
},