Visual Studio Code Color Mapper

About this plugin

Create dynamic, theme responsive SVG assets for Visual Studio Code extensions.

Use the template to get started.

Configuring assets

Selecting a layer will show the original color value, which can be then be mapped to a Visual Studio Code theme color CSS variable of the currently selected theme.

A color can be mapped manually by selecting the variable from a searchable list, or automatically using the Wand button.

Assigned variables can be removed or replaced at any time.

A set of Visual Studio Code themes are included to help you configure layers and visualize how your assets will look in different themes. Before configuring your assets, select the theme you originally designed them for - this will ensure that the closest relevant matching variable is mapped to each layer.

Note: auto-selecting a variable will find the token with the closest color value, but its name may not always make sense semantically.

Always double-check variables before exporting to ensure each token is used in a way that is contextually understandable, ensuring correct rendering in all themes.

Exporting

After exporting you can integrate the .svg file into your Visual Studio Code extension.

Note: currently gradients are not supported.