One of the more interesting, and confusing, things I found creating a VSCode theme was all of the different editor highlight and selection states. Some things Editor highlighting and selecting To help with this there are comments throughout the JSON5 files with descriptions of what things mean and how to trigger them. Unfortunately the VSCode docs for this weren’t always super helpful. ![]() The most difficult thing for me was trying to figure out what all the color names meant. "activityBar.background" : "#231934", "activityBar.dropBackground" : "#52E7E166", "activityBar.foreground" : "#52E7E1CC", "activityBarBadge.background" : "#00837F", "activityBarBadge.foreground" : "#FFFFFFEE" , In this case, the generated output from that file would look something like this: 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. If you do show it to me! Or if you want to install the theme I created, search for ‘Nu Disco’ in VSCode extensions. 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |