VSCode Theme : Create your own theme extension
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.
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:
You will be prompted by a screen that looks like this:
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.
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.jsonin 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!
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
displayName field is also nice. After editing the initial
package.json, let's add the required fields in.
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.
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.
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)
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 packagevsce publish
If you make any changes to your theme, to update we first need to up our version number in the
1.0.1. After updating the version, push the changes to GitHub.
git add .
git commit -m 'commit message'
we can then republish the updated extensions.
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/
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!