VSCode: Create your own custom theme extension

Written by: Ivan Stevkovski

 
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 providing you with a seamless experience, with minimum issues as possible during the creation process!

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)

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

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 start working!

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)

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:

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:

Package the theme you created:

and 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 your extensions and their status head to https://marketplace.visualstudio.com/manage/publishers/
It’s a great pleasure to help people, and because of that, I do hope that you found this article handy.  So I hope you find this article 
Source: https://medium.com/wearelaika/vscode-create-your-own-custom-theme-extension-96c67bd753f6