How to create vscode theme?

Hello everyone, I am here with an article that I think will be very enjoyable. The most important factor when writing code is the code editor you use. The themes we choose in the editor we use can affect our performance. In this article, we will create a vscode theme together and publish it on the visual studio marketplace. If you are ready, let’s start together. ☕☕

I am sharing the theme I published as an example with you, let’s go step by step.

1- Let’s install our package

First, we open the terminal on the computer and run the following command and install our generator code package.

npm install -g yo generator-code

After the installation is finished, we run it by typing “yo code”.
A screen like the one below welcomes us.

2- Let’s create our project

First, we select the New Color Theme option. Then we proceed by selecting the “No, start fresh” option. After completing the naming of our theme, we create our project and open it in vscode.

3- Let’s create our theme

After opening our project in vscode, we open the json file in the theme folder and run it by pressing f5. We can view the changes by working on the json file. You can work through the visual studio documentation in more detail.

As another method, we can use the website created by Jess Chan. By clicking on the link I specified, we proceed to the website, select the colors you want to create and create the json file. We paste this json file into the json file inside the theme folder in the project and the theme is ready.

4- Creating Access

First of all, we log in with our account at dev.azure.com, after logging in, we enter the settings in the navbar, click on the “Personnel access tokens” option and create a new token. We create the access by choosing the two options I have specified in the attachment.

5- Uploading the theme to the marketplace

1- We go to https://marketplace.visualstudio.com/manage/createpublisher and fill in the necessary information.

2- In the project, we open the terminal and run the following command.

npm install -g vsce

3- We write vsce login “username” in the terminal and then enter the access token.

4- We enter the vsce package command in the terminal.

5- We run vsce publish command

And Congratulations..

You published your first vscode theme on the marketplace. You can search and install your theme on Marketplace or vscode extensions.

We have come to the end of my article, I hope it was useful and enjoyable. You can reach me via twitter and linkedin for your criticisms and questions. Thanks and see you in the next article.

The link of the theme I created is https://marketplace.visualstudio.com/items?itemName=ebrardev.kara-sevda