Learn how to add custom themes for colors and icons in Visual Studio Code.
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.
As you can see in the illustration, Color Theme defines two mappings:
colorsmapping that controls colors for UI Components.
tokenColorsmapping that controls colors for each source code token (your source code is broken into tokens by a grammar).
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.