Different syntax highlighting with straight and tilted dark theme variants
posthardcode opened this issue · comments
Hi @robertrossmann 👋
I noticed that the syntax highlighting for the tilted dark variant changed lately, specifically for Javascript/Typescript files.
Remedy - Dark (Tilted)
Remedy - Dark (Straight)
Changes that I've noticed so far: used variables, unused variables, and object keys.
I'm running the latest VSCode version (1.45.0). I noticed that if I disable Semantic Highlighting in the editor, it fixes the issue. So could this have been introduced with the support for Semantic Highlighting?
Hi @nscmnto! Yes, this is definitely a semantic highlighting thing and it was completely intentional to add support for it, although I must say that I definitely did not intend to cause this much of a difference - it must be a bug! 😱
I'll check this out... 🕵️
I cannot reproduce this in an empty VS Code window with an unsaved editor:
const test = (props) => {
const usedVar = props
const unusedVar = usedVar
const obj = {
key: "value"
}
}
There must be something else interfering with the colourisation. Perhaps you have your own semantic token overrides in your Settings? 🤔
@nscmnto Are you using the latest Remedy version, v4.13? Full support for semantic colouring was added in v4.11 so you should be at least on that version to see consistent theming... 🤔
Interesting; so the syntax highlighting in the screenshot you shared is supposed to be the correct one? And my Remedy - Dark (Straight) is the incorrect one?
Since the beginning, both versions have displayed as my Remedy - Dark (Straight) screenshot. I'm using the latest version, and have no semantic token overrides.
For reference, these are the colors I'm getting (might be slightly different, since I'm reading screen values):
Remedy - Dark (Tilted)
props: F9E7C4,
usedVar: C4B69D,
unusedVar, obj: 948B79
Remedy - Dark (Straight)
props, usedVar: F9E7C4,
unusedVar, obj: C4B69D
@nscmnto Yes, to my best knowledge what I shared is the intended look for both dark variants in Remedy.
Okay so let's walk through this... Please check the following in Settings (the JSON file):
workbench.colorCustomizationsshould be either an empty object or completely missingeditor.semanticTokenColorCustomizationssame - empty object or missingeditor.semanticHighlighting.enabledshould be either set totrueor completely missing (trueis the default value for this option)
^ Also double-check that none of these settings are defined/redefined in your project's .vscode/settings.json configuration file
Also please double-check the Remedy theme's version to be at least v4.11. And, also check that you are running at least VS Code 1.44 - semantic highlighting is relatively new, older versions of VS Code might have issues that were fixed later.
What is really disturbing, however, is that green colour used for the object's key in that second screenshot. That's just... wrong. 😱 Could you please put your editor's cursor on that key and from the command palette, call up Developer: Inspect Editor Tokens And Scopes and share a screenshot of what you get? It should look like the following:
Thank you for really taking the time to walk through this with me!
What's weird is that the straight version I shared has been the default for me since I can recall.
My settings match those three points. I don't have project settings. Remedy is 4.13, VSCode is 1.45.
The green color was from an extension (mgmcdermott.vscode-language-babel). After deactivating it, it no longer appears.
However, everything else on both versions is still the same.
@nscmnto thanks for checking those!
Okay, so that explains the weird green colouring, but we are still no closer to figuring out why the heck those constants look different. Let's have a closer look.
Could you please create a bunch of screenshots (or a video recording, whichever you prefer) where you activate that token and scopes inspector I mentioned earlier and click through all the variables in both Straight and Tilted variants? I will have to take a look at the scopes that VS Code selects for each individual variable - I suspect something is interfering there, otherwise it makes no sense at all.
Thanks a lot for helping me troubleshoot this - I am really clueless as to what's going on. 🤷♂️
- VS Code v1.45.1
- Remedy v4.17.1 dark
The colors of the const and readonly variables are strange.
@CatsMiaow Well, that's actually intentional! I wanted read-only variables and constants to be somewhat dimmed to signal the fact that they cannot be modified but only a little bit, because most developers usually use const to declare variables in JS and it would completely change the look and feel JS sources if I use too different a colour.
If you have any suggestions how to improve this I'm all ears, I'm not 100% convinced I've got the colour right but so far I have been relatively satisfied with it...
If so, need to change the color. Because I am confused with the color of the unused variable.
'xxx' is declared but its value is never read.ts(6133)
Dark
Light
Github Light Theme
Ooooh that's a good point... Alrighty, I'll see what I can do with this. It sure looks confusing when the constants and unused variables are close together. 🤔
@nscmnto I am now certain that the original colouring issue you reported was caused exactly by the fact that I forgot to enable semantic highlighting for other theme variants and that the read-only constants have a similar, but not the same, shade as unused variables, which caused weirdly-looking shades of gray appear all over the code.
🎉 This issue has been resolved in version 4.18.0 🎉
The release is available on:
4.18.0- GitHub release
Your semantic-release bot 📦🚀