I made my own VS Code theme in less than an hour, here's how?

#theme #vscode #extension #design

In this blog post, I'm gonna tell you how you can make your own vs code theme extension according to your color preference in less than an hour.

Prerequisites:

Know the color combination on your head you want!. 😉

Let's go!! 🚀

First of all,

Open your vs code and then your terminal. Go to the path where you want to setup your code base by cd [YOUR_PATH].

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

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

npm install -g yo generator-code

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

yo code

This will run the Visual Studio Code Extension (VSCE) generator.

To make a fresh color theme, you need to follow these steps by navigation using the up-and-down arrow keys and press enter to make a selection.

Select New Color Theme
Select No, start fresh
Enter the name of your extension
Enter your extension identifier (ex. of what an identifier is: [publisher-name or author], just press enter and use the default)
Write a short description of what the theme represents or what the idea behind the theme is.
Enter the name (case sensitive) as you want it to appear in the marketplace (This is the extension display name)
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 .

you have successfully completed the setup process 🎉

Now,

you will find a pre-built JSON file having different properties responsible for different coloring for vs code, all you need is to code that JSON file according to your choice.

... Wait,