Customisation

Learn how to use VS Code powerful setting to customise Vira Theme

Visual Studio Code has a powerful settings api that allows you to customise every part of a theme extension from within your settings. The following guide gives you an overview of the various approaches.

Code colors 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"
                }
            }
        ]
    },
},

[Vira*] 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 Graphene].

UI colors override

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

"workbench.colorCustomizations": {
  "[Vira Carbon]": {
    "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 Graphene varian only:

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

This is how Visual Studio Code API work to allow colors customization and it's not a custom logic inside the product.

How to disable italic

The VS Code customisation settings allows you to disable font styles across colour schemes. The following example shows a sample list of scopes to use to disable italics.

"editor.tokenColorCustomizations": {
  "[Vira Carbon]": {
    "textMateRules": [
      {
        "scope": [
          "*",
          "comment",
          "comment.block.documentation",
          "keyword",
          "keyword.control",
          "keyword.operator",
          "keyword.other",
          "storage",
          "storage.modifier",
          "storage.type",
          "variable.language",
          "variable.parameter",
          "entity.name.type",
          "entity.name.class",
          "entity.other.attribute-name",
          "entity.other.inherited-class",
          "constant.language"
        ],
        "settings": {
          "fontStyle": ""
        }
      }
    ]
  },
}

This is a starting list. If something is missing, you may need to find additional scopes using the built-in scope inspector.

Why?

Using VSCode configuration API you'll keep your changes across theme updates and devices by syncing settings, plus, you are able to customise every part to match your taste.