How to customize colors to match your taste

[equinusocio]

Color Scheme override

Basic example

The following example overrides the color of the comments inside code.

"editor.tokenColorCustomizations": {
    "[Vira]": {
        "comments": "#229977"
    }
},

Advanced example

Search for "scope" in the command palette and run the scope inspector, then click any part of your code to get the scope name/s and use them as following.

• editor.tokenColorCustomizations allows you to edit the syntax color of any element.
• editor.semanticTokenColorCustomizations allows you to edit semantic highlighting tokens
• workbench.colorCustomizations allows you to edit vscode UI elements.

Customizing semantic tokens (with semantic highlight ON)(read vscode doc)

"editor.semanticTokenColorCustomizations": {
  "[Vira*]": {
    "rules": {
      "variable": "#ff0000"
    }
  }
}

Customizing textmate tokens

"editor.tokenColorCustomizations": {
    "[Vira*]": {
        "textMateRules": [
            {
                "scope": [
                    "variable"
                ],
                "settings": {
                    "foreground": "#FF0000"
                }
            }
        ]
    },
},

Warning

[Vira Theme*] selector applies the styles to every variant. If you want to apply changes only to a specific variant, replace the * with the variant name. Eg: [Vira Theme Darker].

Customizing UI parts

The following example override the background color of the sidebar (which is a workbench element)

"workbench.colorCustomizations": {
  "[Vira*]": {
    "sideBar.background": "#ff0000",
  }
},

Reset colors to default values

Since vscode 1.91 you can use the default keyword to restore the default value (from original VSC Light/Dark themes) of a key. This can be used on workbench.colorCustomizations, editor.tokenColorCustomizations, and editor.semanticTokenColorCustomizations.

"workbench.colorCustomizations": {
    "sideBar.background": "default"
}

Reference

You can use this page as a reference to find syntax scopes and UI names.

Example

Let's say you want to change the color of the quick panel (CMD + SHIFT + P on Mac), you can find the relative names inside the reference page

You can then add this config inside your config file to edit the Darker varian only:

"workbench.colorCustomizations": {
	"[Vira Darker]": {
		"quickInput.background": "#ff0000",
		"quickInput.foreground": "#ff0000",		
	}
},

Important

This is how Visual Studio Code API works to allow color customization and it's not a custom logic inside the theme.

Why?

Using VSCode configurationAPI you'll keep your changes across theme updates and devices by syncing settings.