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.

Settings

Open VSCode setting and enter @ext:vira.vsc-vira-theme in the search field to display all the customisation settings provided by the plugin

Accent and Custom Accent

Set the accent color used across the interface and icons. You can pick one of the built-in accent color or use the color you like in hex format.

Contrasted tabs

Add more contrast to tabs by using a different background for the tabs bar

Hide explorer arrows

Hide arrow icons in the file explorer. This settings helps reducing che clutter in the UI.

Hide shadows

Hide shadows across the interface for a completely flat look.

Show borders

Show subtle borders in some area of the editor. This setting visually highlights the workbench’s areas, aiding in the drag-and-resize functionality.

Solid line highlight

Render a solid background highlight for the active line instead of a border. This makes the selected line more visibile in the editor.

Sync themes and icons

Synchronise file icons themes with UI themes when switching themes. If you want to use a different icon theme you must disable this setting.

Use outlined icons

Use outlined folder icons. Switch to the alternative version for the folder icons.

Use top tab indicator

Put the current tab indicator at the top instead of the bottom.

Disable italics

Disable italic font style for selected syntax scopes.

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.