Visual Studio Code Color Mapper

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

Use the template to get started.

Automatically mapping assetsIf used in conjuction with the Theme Importer for Visual Studio plugin, layers with theme variables assigned to fills or strokes will automatically be mapped to the corresponding CSS variable.

Note: all layers of a selected design must have unique names.

Manually configuring assetsSelecting 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.

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

Note: currently gradients are not supported.