How to Customize Your VS Code Text Colors in 5 Mins

2 min readJun 6, 2019

1. Pick a color

like #4286f4

2. Add A Custom Rule to Settings

Open up the command pallet with (cmd/ctrl + shift + P) and type

Preferences: Open User Settings (JSON)

Which will open up your VS Code’s settings.json file. Then add the following within that file:

"editor.tokenColorCustomizations": {
    "textMateRules": [
            {
                "name": "The Blue Color I Picked",
                "scope": [
                ],
                "settings": {
                    "foreground": "#4286f4", // change this COLOR
                }            
            }
     ]
}

3. Pick What You Want To Highlight (TM Scope)

Inside VS Code, open a file you want to highlight differently. Then open the command pallet (cmd/ctrl + shift + P) again and type:

Developer: Inspect Editor Tokens and Scopes

From there click on the code you want to be a different color (ex: the if in an if statement) and VS Code will tell you what scopes that code belongs to.

4. Apply The Color

Once you’ve found the scope, for example keyword.control , add it to your settings rule to color it.

Here’s an example of turning all the control words blue:

"editor.tokenColorCustomizations": {
    "textMateRules": [
            {
                "name": "The Blue Color I Picked",
                "scope": [ 
                      "keyword.control"
                ],
                "settings": {
                    "foreground": "#4286f4", // change this COLOR
                }            
            }
     ]
}

You can also “stack” scopes, kind of similar to CSS selectors. For example, this changes all the control keywords, but ONLY for javascript.

"editor.tokenColorCustomizations": {
    "textMateRules": [
            {
                "name": "The Blue Color I Picked",
                "scope": [ 
                      "source.js keyword.control"
                ],
                "settings": {
                    "foreground": "#4286f4", // change this COLOR
                }            
            }
     ]
}

5. Repeat!

Here’s the settings for coloring control words blue, and variables red. For more info on how to select pieces of code, see https://macromates.com/manual/en/scope_selectors

"editor.tokenColorCustomizations": {
    "textMateRules": [
            {
                "name": "The Blue Color I Picked",
                "scope": [ 
                      "keyword.control"
                ],
                "settings": {
                    "foreground": "#4286f4", // change this COLOR
                }            
            },            {
                "name": "The Red Color I Picked",
                "scope": [ 
                      "variable"
                ],
                "settings": {
                    "foreground": "#ff5572", // change this COLOR
                }            
            }
     ]
}