How to create a custom VSCode theme

The Plan

Okay, here's the deal. You're a coder, and you LIVE in your IDE. With so much time spent there, you want your colors to be exactly what you want! I hope to walk you step by step through the process of creating and publishing your own theme to the VSCode marketplace. Who cares if you're the only one who installs it!

Prerequisites

You'll need a few things to get started. A few of these are obvious...bear with me.

• The internet
• Visual Studio Code
• Node.js
• NPM (if you have node installed, you probably have this)
• A browser
• A Microsoft account
• An Azure DevOps account (I'll walk you through how to set this up below)

Software

Install the needed software

npm install -g yo generator-code vsce

Create The Theme

Navigate to where you want your theme directory to live run yo code and choose the "New Color Theme" option, followed by "No, start fresh" then follow the remaining prompts to name and create your new theme. You can now open the project and edit the themes/your-theme-name.json file.

Theme Tips

• If you have an existing theme you use that is "almost" right, you can generate a json file to work with by going to the command pallete in VSCode CMD + SHIFT + P and choosing "Developer: Generate Color Theme From Current Settings"
• You can find what certain color scopes are by going to the command pallete in VSCode CMD + SHIFT + P and choosing "Developer: Inspect Editor Tokens and Scopes" and selecting the text you want to change.

Accounts

We'll need to set up a couple accounts to prep for publishing your theme.

Azure DevOps

1. Go to dev.azure.com
2. Click "Start free" and login with your microsoft account.
3. Name your DevOps organization
4. Click on the user settings icon in the top right, and choose "Personal access tokens" from the dropdown.

   

5. Create a new access token

• Name - Name the token whatever you want
• Organization - Choose "All accessible organizations" from the dropdown
• Expiration - Choose "Custom defined" and choose a date, I chose a date as far in the future as I could (a year).
• At the bottom of the popup click "Show all scopes" and check the "Manage" box in the "Marketplace" section
• Create the access token
• Copy the token and save it somewhere safe
• Note: You may not see the token listed after you create it. This is because the filter at the top is likely set to your organization. Click the access scope dropdown and choose "All accessible organizations" and your token should show up.

Visual Studio Marketplace

1. Go to marketplace.visualstudio.com/manage
2. Create a publisher

• Fill out the name field (id should automatically be generated based on the name)
• Name and id are the only required fields, but fill out the others as desired.
• Hit "Create" and prove you aren't a robot with the popup image challenge.

Final Prep

We're almost there, we just need to tweak a few things in the project to match the accounts you created above.

1. Open package.json in your theme project and add the following

"package": "YourVSMarketplaceID",
"keywords": [
  "some",
  "descriptive",
  "keywords",
],

Publishing

At this point all the hard stuff is done. You can now publish you theme. First login to vsce with the publisher id from Visual Studio Marketplace, and the personal access token from Azure DevOps. Then you can package and publish your extension!

vsce login your_publisher_id
vsce package
vsce publish

References / Examples

vscode-material-icon-theme
monospace-theme
codercoder video tutorial