VSCode: Create your own custom theme extension

Do you want to create your own custom theme extension for Visual Studio Code? This article will guide you through the whole process and rules ensuring you experience as little issues as possible during the process of creation!

First things first you’ll need to have Node.js and Git installed in order to be able to install the necessary packages.

Using npm install yo (yes, that’s the real package name — short for Yeoman)

npm install -g yo generator-code

Open a Terminal and guide to the directory where you want to create your theme, and run the following command:

yo code

This will run the Visual Studio Code Extension (vsce) generator, and here you will navigate using the up-and-down arrow keys and press enter to make a selection.

yo code short guide:

1. Select New Color Theme
2. Select No, start fresh
3. Enter the name of your extension
4. Enter your extension identifier (ex. of what a identifier is: {publisher-name}.{identifier} | just press enter and use the default)
5. Write a short description of what the theme represents or what the idea behind the theme is.
6. Enter the name (case sensitive) as you want it to appear in the marketplace (This is the extension display name)
7. Select a base theme to be used as a starting point

You have successfully created a theme project! Now run the following commands to open it and to start working!

cd {theme-name}
code .

Inside you will find a folder named themes that will contain the theme JSON file. Open the file, run the debugger and happy theming!

For further guidance on this please refer to the following links “Extension help” and “How to theme the editor”

Once you are done and have created your theme, it’s time to publish and share with the world!

Using npm install vsce (Visual Studio Code Extensions)

npm install vsce -g

Create a git repository (to avoid issues, use GitHub) for your project and connect it. Push your whole theme and open up the package.json file.

Inside you will need to configure the git repository, icon, author and all of the marketplace data, which should end up looking something like this:

Now it’s time to package and publish the theme using vsce:

Head over to Azure DevOps and create your organization under which you will publish your extensions https://dev.azure.com/

Once you’ve done that, you’ll need to create your own Personal Access Token (PAT) for that organization.

However, you will want to be careful with this otherwise you will end up getting a 401 error. (vsce 401 error)

When you are creating your PAT you MUST select “All Accessible Organizations”!

Otherwise you will end up receiving the dreaded “Error: Failed Request: Unauthorized(401)”

There is just one more annoying thing you have to do and you will be ready to publish! You will need to create a Publisher.

I prefer to do this directly by using the following link https://marketplace.visualstudio.com/manage/createpublisher, however you can also run the following command and create it that way:

vsce create-publisher (publisher name)

I recommend that you use the link and avoid the vsce shortcut for this, but it is completely up to you.

Inside the Terminal, login to your publisher:

vsce login (publisher name)

Package the theme you created:

vsce package

and publish!

vsce publish

That was it! You have just published your very own VSCode theme!

In a matter of minutes your theme will live on the Visual Studio Marketplace! To follow you extensions and their status head to https://marketplace.visualstudio.com/manage/publishers/

It’s a great pleasure to help and guide people, and because of that I do hope that you found this article handy. 🧡

🚀 You can help me grow by sharing this article, and feel free to connect with me on LinkedIn!

Ivan Stevkovski - Front-end Developer - qBit Solutions | LinkedIn