Let's create a custom VS Code theme in a few minutes!

Customize VS code theme with easy steps to follow.

2 December, 2022

Contributors

Geremsa Narzary

@bonenzy

Getting started

You who use VS Code often as a developer, don't you want your own VS Code theme, your personally tailored theme?

Yes, you want it right! Then let's get into it.

Few points to remember before starting

•

VS code color themes are also one of the extensions.

•

In VS Code there are 2 types of color properties, they are -

Application colors and

Token colors, let's take a look at what these are and we will get started right away.

Application colors: It is the program color itself like - Title bar, Tabs, Scroll bar, menu ... etc, and

Token colors: It is the color of syntax highlighting of code i.e., the colors of the code like variables, functions…etc.

Steps to follow

First and foremost your computer much have Node.js installed. To check if you have node.js installed or not -

•

Windows -> open the Windows Command Prompt, Powershell, or a similar command line tool, and type node -v.

•

Linux / mac -> type node -v on the terminal.

If you see anything then you can install it, there are many guides available on how to install node.js out there.

And if you have node.js installed already then follow through -

1. Create a folder and install the required packages

Create a folder and open it with VS code, and then simply go to the terminal inside VS Code and type the command - npm install yo generator-code to install the required packages.

2. Setting up the file for editing

After the installation is completed let's get started running yo code, here something like this -

How it looks like when you run 'yo code' in the terminal

•

Now press the up/down arrow to move the pointer and select "New Color Theme" then press enter.

•

Then in the new line select "No, start fresh"

•

And fill up all the required/asked fields, the name of the theme; the identifier(there must not be any space while naming this); the description... and press Y to initialize the git repository.

This is how it will look

•

I recommend initializing a git repository because it will be easier for you to work on it later if you decide to work on it later again.

•

Now, select "Open with `code`"

•

And lastly, a new window will pop up just like this -

•

Now, under the themes folder open the JSON file

The json file of the theme

The contents look like this -

Now observe the lines inside the first paranthesis{} is the application color that we talked about earlier and from that on the others are all the token colors. Let's dive into it and start tweaking the colors.

3. Start the changes in your theme

The file is huge and you find it overwhelming so, here are some tricks -

Go to Run -> Start Debugging -> will open and load a new VS Code window of default dark theme and then open up some files on it (if there isn't any open file already), which can help with better clarity whenever a color is changed.

debuger

the default theme

Now if you change any color in the JSON file from earlier, you will notice it in effect immediately in the debugger VS Code window. eg: -

Just a demo

This trick is can be the most helpful one, for this press ctrl + shift + p to open command palate and search for the command Inspect Editor Tokens and Scopes

With this, a pop-up will show up, something like this -

The highlighted part can be used for search the po

Now what you can do is with the cursor put the pointer at whichever code token color you want to change, in the above image I put the pointer at the const and the pop was giving the details of the const a variable property, and as you may observe I have highlighted one detail on this pop-up, at the foreground section "storage.type", this is the detail that will help us while searching for a specific token to change the color. So, now copy this text in the foreground section.

Now go back to the previous VS Code window to edit the JSON, in that file type
ctrl + f and paste there the copied property.

Now, let's try and change this color to red,

However, doing this can take way too long time, but I have got a reference/tool for you made by Jesica, I bet you know her since she has a YouTube channel named Coder Coder, so what she did was, she made this tool

easy to use

Just copy the JSON file created by the too and paste it into your JSON file

And that's it you can check your end theme.

How to use the theme on your local device!

For this you will require to install vsce(visual studio code extension) so, let's get started -

go to terminal npm install --global vsce
run vsce package

just type 'Y' in every field asked and required.
lastly, just install your theme. code --install-extension [your theme name]-0.0.1.vsix reference from mine code --install-extension kawaii-theme-0.0.1.vsix. BTW 0.0.1 is version so depending on your version number you give that number while installing.

the command

Then go to your file > preference > color theme and you can find your theme.

mine was kawaii theme whats your theme name share in the comment XD

And that's all it was you have created your first your own VS Code theme.

If by any chance you ran into some problem you can contact me on Twitter. Happy coding folks.

vscode

howto

develate

theme