Repository navigation
[3.24.0 ver] is messing up Monokai/Abyss Theme #3458
Description
Describe the bug
When on Monokai/Abyss Theme proper color coding is messed up.
Observed this when the Analyzer finishes analyzing the Flutter code. During the analyzing process the theme is proper.
To Reproduce
Steps to reproduce the behavior:
- Install Flutter extension
- Change Theme to Simple Monokai or Abyss .
Screenshots
**Versions **
- VS Code version: 1.57.1
- Dart extension version: 3.24.0
- Dart/Flutter SDK version: 3.24.0
Activity
DanTup commentedon Jul 4, 2021
Can you be more specific about which part you think is incorrect? Syntax highlighting now uses LSP's semantic tokens and should be more accurate. Previously, the syntax highlighting was regex based and not quite as accurate, so the new behaviour should better match the theme.
If you can give some specific examples of things that you think are now coloured incorrectly, I'll take a look. Thanks!
Shiba-Kar commentedon Jul 4, 2021
When ever I switch to Monokai/Abyss Theme there is underlines in classes and methods which is not normal in these themes.
One more observation this issue is present in my resent projects the older ones works perfectly.
weakvar commentedon Jul 5, 2021
Hey there! I'm using a light theme from GitHub. After updating, parameters are now yellow. Also noticed that the
@overrideannotation is not correctly highlighted (@is red,overrideis black).Should we now look for another appropriate theme for code highlighting, or is this a bug in the extension and it will be fixed in the near future?
Before
After
DanTup commentedon Jul 5, 2021
@Shiba-Kar
As far as I can tell, this is coming from the theme. Class names are defined as being underlined:
https://github.com/microsoft/vscode/blob/main/extensions/theme-monokai/themes/monokai-color-theme.json#L204-L211
Here's a screenshot of some TypeScript code using that theme and shows the same:
These may have not shown up previously because the syntax highlighting was not using semantic tokens until recently. If you're seeing different highlighting in some of your projects, it's possible you have either LSP or semantic tokens disabled for those projects.
DanTup commentedon Jul 5, 2021
@weakvar the orange parameters seem to come from VS Code mapping the
parametertoken onto thevariable.parametertextmate scope and the theme seems to define variables as orange:This seems to match the colouring in TypeScript too, so I believe it's also correct and as the theme defines it.
This one is definitely a little more controversial. The
@is coloured as an "annotation", but the rest of the annotation is coloured semantically (it should therefore match the colour of whatever that part is, whether it's a getter, a constructor, etc):You can disable semantic tokens if you prefer the old textmate grammar colouring, or you could customise these token colours in your settings to change them as you'd like.
Hope this makes sense!
weakvar commentedon Jul 25, 2021
Hey everyone who faced the same problem. To fix this issue, you have to turn off
semanticHighlightingin the Visual Studio Code settings.DanTup commentedon Jul 26, 2021
Turning off semantic highlighting is an option, but you'll miss out on getting proper semantic tokens (for example if you name a method
getorsetit will be coloured incorrectly, and you may also get less accurate colourings in things like string interpolation).A better option may be better to pick a theme (or customise your theme) to look how you'd like with semantic tokens.
I don't think there's anything to do here so I'll close this. I believe things are working as intended, even if they seem different/unexpected. If you find things that don't seem to be coloured as the theme source suggests though, please do file issues. Thanks!