Search code examples
flutterdartvisual-studio-codecolor-schemetextcolor

How to use tokenColorCustomizations VS Code text color changer in dart?


tokenColorCustomizations does not stick with dart, I can change JSON file but the color does not stick to it.

enter image description here


Solution

  • Dart uses Semantic Tokens so you need to customise the semantic token colours rather than textmate tokens. For example:

    "editor.semanticTokenColorCustomizations": {
        "rules": {
            "keyword.void": {
                "foreground": "#ffff99",
                "fontStyle": "underline"
            }
        }
    },
    

    This will make the void keyword (keyword is the type, void is a modifier) yellow and underlined:

    Void keyword yellow

    You can see which semantic token types/modifiers are applied to each item by using the Inspect Editor Tokens and Scopes command in VS Code:

    Semantic token types and modifiers

    To change the colour of a class name, you could use:

    "editor.semanticTokenColorCustomizations": {
        "rules": {
            "class": {
                "foreground": "#ff9999"
            }
        }
    },
    

    Which will look like this:

    Colour class names