How to create a custom VSCode theme
Tags: vscode, themes, custom, color
Published: 2024-04-26 16:16:29

#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
```bash
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](https://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.
<p align="center">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj7iatl065bdrxzl1xfh.png" width="20" />
</p>
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](https://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
```json
"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!
```bash
vsce login your_publisher_id
vsce package
vsce publish
```

#References / Examples
[vscode-material-icon-theme](https://github.com/PKief/vscode-material-icon-theme)
[monospace-theme](https://github.com/keksiqc/monospace-theme)
[codercoder video tutorial](https://www.youtube.com/watch?v=pGzssFNtWXw)