Nick Carnival

Your Own VSCode Theme


There are a ton of options for VSCode themes with both dark and light setups. You can use some of the more popular options like One Dark Pro or Dracula, but it is also possible to create your own theme.

TLDR:

Create and download a theme from themes.vscode.one, then create a new vscode extension directory with yo via yo code. Move your downloaded .json file into the themes directory and run npx vsce package. This will create a .vsix file which you can install locally by right clicking on it in VSCode. If you want to publish the extension to the VSCode marketplace continue to the publishing section.

Guide:

Styling a Theme

When making a theme it helps to have a color palette in mind, I use coolors.co/generate to either generate a palette, or coolors palettes to find some inspiration. Alternatively you can fork one of the themes on themes.vscode.one. This guide doesn’t go into detail about using vscode.one because there are so many options there, just checkout all of the exposed vscode css classes in the docs to get an idea of what all you can customize.

After you’ve created, forked or found a theme you like, you should download the theme .json by clicking on the cloud download icon.

Creating an Extension

You can copy my theme from here and add your .json to the themes directory, or you can create your own with yeoman:

With the .json file downloaded, you’ll need a new npm project to create the extension. You can use the yeoman scaffolding tool to create a quick project, like so:

npm install -g yo
mkdir vscode-theme
cd vscode-theme
yo code

I like to select the start fresh option:

now move your downloaded .json file into the new directory. Mine is called my-theme.json.

Run this script to generate your .vsix file:

npx vsce package

This might throw some warnings but you can just press y:

Now you should see a .vsix file which you can install to VSCode locally, with a right click:

Publishing an Extension

I’de recommend following microsofts guide for publishing an extension. There are quite a few steps.

TLDR; you have to create an organization, then a personal access token, then a publisher account and run

npx vsce login <publisher id>
npx vsce publish