How to set syntax highlighting for Dart variable in Visual Studio Code

1
votes

I am using Visual Studio Code for coding Dart with Flutter. I installed Dart and Flutter plugins as well as the Material theme from Matta Astorino. The problem is I can't specifically set the syntax highlight of my variables with Dart language using the Material Theme Ocean High Contrast color theme.

The settings i used:

  "editor.tokenColorCustomizations": {
    "[Material Theme Ocean High Contrast]": {
    "comments": "#229977",
    "variables": "#ffffff"
    }
  },

1 -Dart

From the picture above, the comments syntax highlighting seems to work fine but the syntax highlighting for variables is still showing in grey (which supposed to be white).

1 -JavaScript

In JavaScript, it seems to work fine.

Please help on these Dart syntax highlighting for VSCode Thanks.

1
dartvisual-studio-codesyntax-highlightingvscode-settingsmaterial-theme

1 Answers

2
votes

I don't use Dart, but i can say that, sometimes you have to be more specific with setting syntax scope colors.

First of all - you need to know what the scope is. To do this, please run Inspect TM Scopes.

enter image description here

Here you have described how to do it:

To understand better, it is good to read:

Sublime Text have a good explanation too:

Ok, and now:

When you find out what the scope is, then you have to create or overwrite it. Example:

    "editor.tokenColorCustomizations": {
        "[My Theme Name]": {
            "textMateRules": [
                {
                    "name": "Entity",
                    "scope": "entity.name",
                    "settings": {
                        "foreground": "#FFC66D"
                    }
                },
            ]
        }
    },

If you will create more and more new scopes, remember that:

  • being too specific will result in a color scheme that often only looks good for one or two syntaxes.