How to Modify Themes in VSCode

Ever found a theme you really liked but there were just a few small blemishes that kept gnawing at you?

It happened to me with the Monokai theme that comes with VSCode. But fortunately, VSCode allows you to modify almost every single aspect of a theme.

There are two types of customization available in VSCode.

• workbench.colorCustomizations
• editor.tokenColorCustomizations

workbench.colorCustomizations

This allows you to customize the VSCode interface. You can customize the sidebars, various backgrounds, status bar, mini-map and much more. I mainly used it to tune the colors to increase contrast.

Here’s how to access and customize it:

• Open the user settings by hitting ctrl + shift + P and searching for Preferences: Open Settings (JSON).
• Create the workbench.colorCustomization JSON property if it’s not already created.
• Create a nested property with your theme’s name in [] such as [Monokai].
• Create an object.
• Add and modify the properties you want.

Check out the full list of options here.

Here’s how mine looks with the customizations for the Monokai theme.

1
"workbench.colorCustomizations": {
2
    "[Monokai]": {
3
        "sideBar.foreground": "#c7c7c7",
4
        "sideBar.background": "#0b1014",
5
        "sideBarSectionHeader.background": "#0b1014",
6
        "editor.background": "#000000",
7
        "breadcrumb.background": "#0b1014",
8
        "statusBar.background": "#0b1014",
9
        "statusBar.foreground": "#626262",
10
        "minimap.background": "#0b1014",
11
        "titleBar.activeBackground": "#0b1014",
12
        "editorGroupHeader.tabsBackground": "#0b1014",
13
        "activityBar.background": "#0b1014",
14
        "tab.inactiveBackground": "#0b1014",
15
        "tab.activeBackground": "#0b1014",
16
        "tab.activeBorder": "#ffd866",
17
    }
18
}

editor.tokenColorCustomizations

This lets you modify the syntax highlighting of the theme.

Here are the steps:

• Open the user settings by hitting ctrl + shift + P and searching for Preferences: Open Settings (JSON).
• Create the editor.tokenColorCustomizations JSON property if it’s not already created.
• Create a nested property with your theme’s name in [] such as [Monokai].
• Create another nested property called textMateRules and initialize to an empty array.
• Create objects with scope and settings keys to modify the defined scopes.

How to Find Out TextMate Scope in VSCode

If you are not familiar with TextMate scopes here’s how to figure them out in VSCode:

• Hit ctrl + shift + P.
• Search for Developer: Inspect Editor Tokens and Scopes and hit enter.

This will open a window and show you all the details about that scope.

Here’s my code:

1
"editor.tokenColorCustomizations": {
2
    "[Monokai]": {
3
        "textMateRules": [
4
            {
5
                "scope": [
6
                    "punctuation.quasi.element",
7
                    "punctuation.definition.string.begin",
8
                    "punctuation.definition.string.end",
9
                    "punctuation.definition.quasi.begin",
10
                    "punctuation.definition.quasi.end",
11
                ],
12
                "settings": {
13
                    "foreground": "#00c4f5"
14
                }
15
            },
16
            {
17
                "scope": "string.unquoted",
18
                "settings": {
19
                    "foreground": "#21e2d2"
20
                }
21
            },
22
            {
23
                "scope": "variable.parameter",
24
                "settings": {
25
                    "fontStyle": "",
26
                }
27
            }
28
        ],
29
    }
30
}