Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
38 lines (23 sloc) 1.65 KB
ContentId DateApproved MetaDescription
37b6ae0a-d1b5-48b6-9bd4-9b50ef11d573
2/6/2019
Learn how to add custom themes for colors and icons in Visual Studio Code.

Theming

In Visual Studio Code, there are two types of themes:

  • Color Theme: A mapping from both UI Component Identifier and Text Token Identifier to colors. Color theme allows you to apply your favorite colors to both VS Code UI Components and the text in the editor.
  • Icon Theme: A mapping from file type / file name to images. The file icon is displayed across the VS Code UI in places such as File Explorer, Quick Open List, and Editor Tab.

Color Theme

color-theme

As you can see in the illustration, Color Theme defines two mappings:

  • The colors mapping that controls colors for UI Components.
  • The tokenColors mapping that controls colors for each source code token (your source code is broken into tokens by a grammar).

We have a Color Theme Guide and a Color Theme Sample that illustrates how to create a theme.

Icon Theme

Icon themes allow you to:

  • Create a mapping from unique icon identifiers to images or font icons.
  • Associate files to these unique icon identifiers by filenames or file language types.

The Icon Theme Guide discusses how to create an Icon Theme.

icon-theme