Make your own vscode theme from scratch

By

Vineel Sai

profile

To make a vscode theme you first need to install nodejs and npm before you get started and also make sure you have vscode installed for obvious reasons.

NodeJs - https://nodejs.org/en/ vscode - https://code.visualstudio.com/

Install yo

  • After you install npm run the following command in your terminal.
npm install -g yo generator-code

Install yo

  • This installs yo and generate-code globally in your system

Create theme

  • After successfully installation run the following command to create a project
yo code
  • You will be asked to select options how you want to create the theme and other questions make sure you fill them all correctly

yo code

yo code

yo code

Edit theme

  • After you finished it will open the created project in vscode.

vscode

  • Press F5 on your keyboard and it will open a debug window where you can test the theme.

vscode debug window

  • In vscode open the JSON file named your theme name-color-theme.json under the themes folder.

  • vscode provides a color picker when you hover around the color box in front of the hex code it makes it easy to edit the theme.

  • Edit the colors you want and save the file.

vscode theme edit

  • The theme will instantly reflect in the debug window as soon as you save it.

vscode debug window

Feel free to make whatever changes you want to make.

Explore more at - https://code.visualstudio.com/docs/getstarted/themes