[DOC] How to customize color on variable, function, and other token coloring ?

[GulajavaMinistudio]

We see some people not satisfied with default syntax highlighting guide on Mayukai Theme color scheme. But don't worry, VS Code provide some settings that can be easily do with you. VS Code provide token color customization and syntax highlighting setting in advanced Settings.json file.

First, open VS Code Settings, and navigate to Top Right corner on your Settings Page. There's button called "Open Settings(JSON)" and press it to open VS Code Settings in JSON file.

Or you can open it by pressing Ctrl + Shift + P to open command Palette, and type "Preferences: Open Settings (JSON)"

Settings JSON File

After settings.json opened, you can add your custom color for variable and function or any color what you want on Mayukai Theme. On the last line in Settings.json file, add this line to make custom color on variable color, for example for Go language.

 "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "Variable Property for Go",
                "scope": [
                    "variable.other.assignment.go"
                ],
                "settings": {
                    "foreground": "#d4bfff"
                }
            },
        ]
    }

After you saved that settings. This will change the color for variable on Go language with purple color, you can see the result by opening .go files .

How to Get Textmate Scope ?

As you can see, custom color that applied on above example, use textMate Scopes "variable.other.assignment.go" . But how to get this parameters?

You can get this textMate scope parameters easily with VS Code command too. First, open your programming language file, and open command palette Ctrl + Shift + P , and type "Inspect Editor Token and Scopes" . This will activate developer mode on VS Code, and you can move text editor cursor to any text in your file.

This picture show textMate scope after activating Inspect Editor Token and Scopes Mode.

For example we will change color function to yellow in Go language. You can just add textMate scope "support.function.builtin.go" on VS Code settings.json like before.

{
          "name": "Function for Go",
          "scope": [
              "support.function.builtin.go"
          ],
          "settings": {
              "foreground": "#ffcc66"
          }
}

Save that settings file, and see the result. The function color, changed to yellow.

That's it, simple tips and tricks for customizing your Mayukai Theme with VS Code Settings. And here's other reference from Stackoverlow and official docs. Token Color Customization with Textmate Scopes Semantic Token Color Customization Color Theme Docs Theme Color Textmate Scopes Syntax Highlighting Guide Semantic Token Scope VS Code Settings Guide