Colors in the Visual Studio Code user interface fall into two categories:

  • Workspace (Workbench) colors: Used in views and editors, includingActivity Bar,Status Bar, the full color list is available atTheme ColorTo check the
  • Syntax colors: Used to highlight source code in the editor. These colors are related to the specific syntax and language tokens

This tutorial will cover various methods for creating color themes

Table color

The simplest way of creating workbench color theme from the subject of an existing custom renovation, first in the color theme – > preferences selected one do you like the color of the theme, and then open the Settings. The json file, configure the workbench. ColorCustomizations fields, The modification takes effect immediately. For example, this code will change the color of the title bar:

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"}}Copy the code

A complete set of Color configuration items can be found here

Syntax color (Syntax)

There are two ways to generate your own syntax colors:

  1. An existing one from the communityTextMateTopic (.tmThemeThis is the simplest way, similar to the workbench color theme above
  2. Create your own syntax themes from scratch

From an existing theme creation, switch to the first want to modify the color of the theme, and then edit Settings. The json file, modify the editor. The tokenColorCustomizations fields, such as the color of the next piece of code will modify comments:

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"}}Copy the code

See Syntax Highlight Guide for more information

Semantic color

Semantic color is a new feature released since VS Code 1.43 and is an enhancement of syntax color based on symbolic information provided by the Language Service. Currently only TypeScript and JavaScript is supported, but support for other languages will be added later. The rendering of colors starts with the Language Service starting and the calculated semantic symbols.

Users can use the editor. TokenColorCustomizations field coverage set theme semantic highlight:

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true}}Copy the code

See Syntax Highlight Guide for more information

Create a color theme

  1. throughCommand PaletteperformDeveloper: Generate Color Theme from Current SettingsCommand to create a theme file based on an existing theme
  2. withgenerator-codeCreate a theme extension 
    npm install -g yo generator-code
yo code
Copy the code
  3. chooseStart fresh
  4. Copy the theme file into the generated plug-in project

You can either import an existing TextMate theme (.tmTheme file) with generator-code, or you can download a theme file and replace tokenColors with the file (.tmTheme) path:

{
  "type": "dark"."colors": {
    "editor.background": "#1e1e1e"."editor.foreground": "#d4d4d4"."editorIndentGuide.background": "# 404040"."editorRuler.foreground": "# 333333"."activityBarBadge.background": "#007acc"."sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}
Copy the code

When writing a theme, suffix the file with -color-theme.json to get code completion and auto-prompt. Additionally, a large number of TextMate themes can be found in ColorSublime, You can download link (format like “https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/ (name). TmTheme”) used directly in the gene Rator -code or extension

Test color theme

Press F5 to start the debug mode, and then select the Theme created by yourself from File > Preferences > Color Theme to view the effect. The changes made to the Theme File in the debug state will take effect in real time

Publish color themes

You can use the VSCE Publishing Tool to publish your theme to the Marketplace to share it with others, and Marketplace Presentation Tips will help you optimize your publishing to the Marketplace

Setting the Category field name in package.json to Themes will make it easier for users to find your theme

Create color ID

You can create your own color ID using the Color Contribution Point, so that the color can be automatically completed with the code in the Color Contribution Point and color theme file, Users can see the colors defined by the plug-in under the Contributions TAB

Questions for further study

  • To illustrate the actual meaning and use of color ID in a more intuitive way

Related articles

  • VS Code Plug-in Development Tutorial (1) Overview

  • VS Code plug-in Development Tutorial (2

  • VS Code Plug-in Development Tutorial (3

  • VS Code Plug-in Development Tutorial (4

  • VS Code plug-in development tutorial (5) Using Command

  • VS Code Plugin development Tutorial (6) Color Theme overview

  • VS Code plug-in development tutorial (7) Tree View

  • VS Code Plug-in Development Tutorial (8) Webview

  • Build a Custom Editor

  • VS Code Plug-in Development Tutorial (10

  • Language Server Extension Guide Language Server Extension Guide