Storm theme: Variable color keeps changing

[AshConnolly]

Hi there! 👋

I'm using the Tokyo Night Storm theme and the color for variable names is usually white. However, perhaps since a week ago, the color changes to purple after vscode has finished loading.

See here where I reload window, the color changes to correct color of white, then it becomes purple after vscode has finished "Activating Extensions" & "initializing JS/TS language features".

Also note how it only occurs to variables following the declaration, not in the return statement.

tokyo.night.bug.mp4

Hope you can help solve this problem as the theme is gorgeous!! 😃
Cheers! Ash

System:
VScode: 1.55.0 (latest)
MacOS Catalina 10.15.7
Tokyo Night version: v0.7.7 (latest)
Also I have nothing in my settings to change ui colors.

[enkia]

Variable declarations have always been purple :

But awhile ago, vscode added semantic highlighting. You may have turned it on back then? Anyway, my theme didn't look so great (to me) with it turned on so I added a note to the readme saying to disable it for now. Well, I've added more support for it this month, and added a line in the themes telling vscode that my theme supports it. One of the ways I did that was to make sure variable declarations remained purple instead of the white you see there. White is the color I chose when they are referenced so vscode picked that up for all variables when adding semantic support back in July.

Also, it takes awhile for vscode's ts/js features to initialize and that's why you see it change from what you prefer, to what it is.

In order to fix your issue, you can add this to your settings.json, I believe:

    "editor.semanticTokenColorCustomizations": {
        "rules": {
            "variable.declaration": {
                "foreground": "#c0caf5"
            },
        }
    },

Or you may want to try the theme with it turned off to see what my original intention is:
"editor.semanticHighlighting.enabled": false

This is actually the way I prefer it but I'm trying to get used to semantic highlighting myself since it's useful in some ways... such as being able to visually see what a parameter is. (They are a dim gray in that screenshot above.)

[AshConnolly]

That is it! Thanks so much for the thorough explanation enkia, it's appreciated! 😃 👍
Curiously I haven't changed any settings, but VScode did update.

Yeh I'm not a fan of this semantic highlighting either... adds more visual confusion imo

I see what they're trying to do with the dim grey to indicate a reference to a parameters, but I think it might would make more sense for both the defined parameters & references to it to be the same orange color... maybe..
Also noticed that semantic highlighting changes the color of object properties from the usual green (seen in the string 'test') to a dracula-theme-esque minty green! Interesting!

Thanks again Enkia!
And thanks for the great theme 👍

[enkia]

Yeah, I agree that parameters all being the same color makes more sense but for me, I use the stark contrast of that orange to visually make it immediately apparent that the function has parameters but it's horrific looking (to me) to have them all orange. I may decide that my theme isn't meant for semantic highlighting and revert last week's change.

The minty green object colors is also the 'original intent' pre-semantic so last week's fix was to make them minty again.

Adding the below under "rules": will set it back to the light blue that you're used to (if you keep semantic highlighting set to true)

"property.declaration": {
    "foreground": "#7dcfff"
},