There are many themes available in VS code marketplace. Not many of us know how they are created and are published.In this tutorial we will learn to create a VS code theme and Publish it in the VS code marketplace and use it as an extension in the editor. It's simple and easy. Just follow the steps and you'll be all set with a new VS code Theme. Let's Begin then,

Requirements:

Node.js installed
VS code Editor

There are two ways to Create the theme.You can follow any of the two and use the same method to publish the theme. Methods are,

Creating theme with yo generator-code:

Installing the generator:

npm install -g yo generator-code

Run Yo code:

The Yeoman generator will walk you through the steps required to create your customization or extension prompting for the required information.

To launch the generator simply type:

yo code

Select New Color Theme using arrow key.

You'll be asked few questions like the name of the theme and description. Enter it. And it will generate a bundle with the name you entered.

you'll see the bundle like above. You can run the theme by pressing F5 of your keyboard.It will open a extension development host where you can test the theme. Edit the file inside the themes folder of the project to change the theme and You can see changes in the extension development host.

Creating theme with vscode-theme-generator:

We start by cloning the vscode-theme-generator-quick-start repo.

git clone https://github.com/Tyriar/vscode-theme-generator-quick-start.git

This command will clone the repo to your desired destination. then,

npm install

And then if you run,

npm start

It will open a extension development host where you can test the theme. Edit the file inside theme.json of the project to change the theme and run with npm start agin to see the change in the extension development host.

check this repo.

Setting up for publishing the theme:

Edit your README.md file and package.json file as required.

Let's bundle the theme,

npm  i  -g  vsce
vsce package

It'll generate a file named yourthemename-version.vsix . You can send this file to others and they can use it. But it's not in marketplace so they should install it locally,

code  --install-extension  yourthemename-version.vsix

The theme is installed and can be used from the color theme selection.

You'll need the access token from the azure developers.Follow the steps to get one.

Publishing The theme:

vsce create-publisher (publisher name)
vsce publish -p <token>
vsce publish

Your theme is published hurray 😃

Checkout this theme I created.

Creating & Publishing a VS code Theme

Related blogs