#Creating visual studio code theme how to
#Creating visual studio code theme install
#Creating visual studio code theme free

When Style Dictionary runs, it performs transforms on the tokens like creating a name based on the object path and resolving any references to other token values. This is how Style Dictionary knows what parts of the object are design tokens. One thing you might notice is that each color definition is not a string, but rather an object with a value attribute. You can define common colors that are used throughout the theme, like and reference them in the application and syntax styles. This brings me to the second reason why Style Dictionary is helpful: aliases. 'name' : 'nu-disco', 'displayName' : 'Nu Disco Theme', 'description' : 'A VSCode theme that boogies.', 'publisher' : 'dbanksdesign', 'galleryBanner' : If you want to hide a border, you can define its color as `#0000` which is fully transparent black in RGBA Hex. The package.json is similar to one for an npm package, but has some different attributes. For a color theme, that will be another JSON file. It uses a package.json file to describe the extension, and then points to other files in the package. A VSCode extension is very similar to an npm module. What we are really building is a VSCode extension that contributes one or more themes.

#Creating visual studio code theme install

If you do show it to me! Or if you want to install the theme I created, search for ‘Nu Disco’ in VSCode extensions.

#Creating visual studio code theme free

Feel free to take it and modify it to create your own theme. I tried to document and explain everything to make it easy to follow and customize. It is a Github template so that you can start a new repository based on it. Here is the code for the theme we are going to build if you want to skip the article and dive in. Aliases also allow you to make multiple themes without redundant code.This is helpful so that you can tweak colors you use in multiple places in the theme without having to copy and paste. You can reference token aliases which allow you to reuse colors.This can be helpful as themes can be hundreds of lines long, and JSON does not allow comments. You can break up the theme into multiple JSON, JSON5, or JS modules.Style Dictionary is a great tool for creating VSCode color themes for a few reasons: If you would like to know more about design tokens, here are some resources and here is a good introductory article.Ī VSCode theme file is a JSON file that defines colors and styles in a way that resembles design tokens: name-value pairs. Disclaimer: I am a maintainer on Style Dictionary. Style Dictionary is a framework written in Node for creating and managing design tokens. Throughout the process I will try to explain concepts about VSCode theme development so you can apply them when you are creating a theme even if you don’t use Style Dictionary.

#Creating visual studio code theme how to

In this article I will show you how to build a Visual Studio Code color theme extension using Style Dictionary. Screenshot of Nu Disco Visual Studio Code theme Introduction Building a Visual Studio Code Theme with Style Dictionary October 28, 2019