VSCode Theme : Create your own theme extension

vividic

If you want to create your own custom theme extension for VS Code, this blog will guide you step by step to create one. I have created my custom theme “vividic”. Follow the below steps to create your own.

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

node.js

Install Yeoman and the VS Code Extension generator:

npm install -g yo generator-code

The Yeoman generator will walk you through the steps required to create your customization or extension prompting for the required information.

To launch the generator simply type:

yo code

You will be prompted by a screen that looks like this:

yo-extension

When selecting this, it asks if this is a new theme or if we want to import from an existing one. We want to create a new one.

start-fresh

Next, you’ll have to answer a few other questions, including:

• What’s the extension’s name?
• What is the the identifier? (I just went with the name, that’s probably typical.)
• What is the the description? (I just put something silly in initially. Don’t worry, you can update this in your package.json in the future.)
• What’s the publisher’s name? (See instructions.)
• What name should be shown to the user? (I used the same as the extension name.)
• Is this theme dark, light, or high contrast?

You have created a vscode theme project! Run the below commands to open it and to start working!

cd {theme-name}
code .

You will find a themes folder , that contain the theme package.json file.

There are additional fields needed for the VSCode extension inside the package.json file, these are publisher, engines, categories, and contributes, a displayName field is also nice. After editing the initial package.json, let's add the required fields in.

package.json

For further guidance on this please refer to the following links “Extension help” and “How to theme the editor”

Time for package and publish your theme using vsce.

To publish a file in the marketplace, you need to have an access token from Azure. You can create this account by going to dev.azure.com/vscode.

azure

Once it is created, we need to get a Personal Access Token (PAT) for that organization. This is a detailed process to get right, so make sure to follow all the directions in the images below.

PAT

Things to note, in Organization, make sure to select All accessible organizations. Then, to open the Marketplace option, click on Custom defined and show all scopes.

You can then find the Marketplace and click all the check boxes (read, acquire, publish, and manage). Once all of this is done, click Create and make sure to save your access token somewhere as Azure does not save it on their end. Also, copy the access token to the clipboard, because we will use it in the next step.

Now that we have an Azure account set up to publish on the Marketplace, we can install the vsce package and create a publisher. If you already have a publisher name under the account section of VSCode Marketplace, you can skip the creation part and use the name you have already created.

vsce create-publisher (publisher name)

Here it should prompt you for the access token you copied when creating your account. After the publisher is set, we should then be able to login.

vsce login (publisher name)

In the package.json file the publisher field is the username used in the vsce login as well. Double check you have copied all of your settings.json rules into the correct sections of your themes json file and we can move onto packaging and publishing the extension.

vsce package
vsce publish

If you make any changes to your theme, to update we first need to up our version number in the package.json from 1.0.0 to 1.0.1. After updating the version, push the changes to GitHub.

git add .
git commit -m 'commit message'
git push

we can then republish the updated extensions.

vsce publish

That was it! You have just published your very own VSCode theme!

In a matter of minutes your theme will live on the Visual Studio Marketplace! To follow you extensions and their status head to https://marketplace.visualstudio.com/manage/publishers/

vs marketplace

By the way, the color theme I wrote for myself is vividic.

🚀 You can help me grow by sharing this article, and feel free to connect with me on LinkedIn!