How I created and published a VS Code theme

Creating a custom VS Code theme might seem daunting, but it’s surprisingly straightforward once you know the process. After spending countless hours in VS Code working on my side projects, I decided to build my own themes and I want to share exactly how I did it.

Why build your own theme?

You might wonder: “Why create another theme when thousands already exist?”

Here’s why it’s worth it:

Comfort matters. If you’re like me and spend most of your time in VS Code, a poorly crafted theme will strain your eyes over time. A personalized theme that matches your taste and work style can genuinely boost productivity and make coding more enjoyable.

It’s easier than you think. With the right tools, you can have a custom theme up and running in under an hour. If you know what you want, because… I could spend hours just customizing colors.

Quick customization vs. building from scratch

Before diving into theme creation, you can test the waters by customizing your current theme. Open VS Code’s Command Palette and navigate to User Settings. Add this to your settings.json:

{
  "workbench.colorCustomizations": {
    // Your custom styles go here
  }
}

You can find all available color scopes in the VS Code Theme Color Reference.

However, this approach becomes unwieldy quickly—there are hundreds of scopes to customize. Building a proper theme is more efficient.

What you’ll need

Requirements:

VS Code installed
Node.js and npm
Microsoft Azure DevOps account
VS Code Marketplace publisher account
GitHub account (recommended)
Patience and attention to detail

Tools we’ll use:

Yo Code extension generator
VS Code’s built-in debugger
Color palette tools like Colors & Fonts( I am biased, because I made this…)

Step 1: Generate your theme structure

The Yo Code generator creates all the necessary files for your theme. Here’s how to set it up:

Install the generator:
```
npm install -g yo generator-code
```
Create your theme:
```
yo code
```
Follow the prompts:
- Select: New Color Theme
- Choose: No, start fresh
- Enter your theme name and details
- Select a base theme (Dark, Light, or High Contrast)
- Initialize git repository: Choose based on your preference
- Open in VS Code: Recommended

Important naming consideration

Critical: Your theme identifier becomes permanent once published. Changing it later creates a separate listing on the marketplace, so choose wisely.

Step 2: Understanding the file structure

Yo Code generates several important files:

themes/your-theme.json - Your main theme file (this is where you’ll spend most of your time)
package.json - Extension metadata and marketplace information
.vscode/launch.json - Debugger configuration
README.md - Documentation (must be customized before publishing)
CHANGELOG.md - Version history

Step 3: Building your theme

Open themes/your-theme.json. You’ll see two main sections:

{
  "colors": {
    // UI elements (sidebar, status bar, etc.)
  },
  "tokenColors": [
    // Syntax highlighting (code colors)
  ]
}

Testing your theme in real-time

Press F5 or go to Run > Start Debugging
This opens a new VS Code window with your theme active
Open the Command Palette and search for “Inspect Editor Tokens and Scopes”
Click on any code element to see its scope information
Use the scope names to customize colors in your theme file

Pro tip: Keep both windows open—edit in one, see changes in the other.

Step 4: Setting up for publication

Create Azure DevOps account

Sign up at Azure DevOps
Click your avatar → Personal Access Tokens
Create New Token with these settings:
- Name: Choose something memorable
- Organizations: All accessible organizations
- Scopes: Click “Show all scopes” and check Marketplace > Manage
Save the token securely - you’ll need it later

Set up marketplace publisher

Go to VS Code Marketplace
Sign in and create a publisher profile
Fill out all required fields
Note your Publisher ID - you’ll need this

Step 5: Prepare your package.json

The generated package.json is incomplete for marketplace publishing. Here’s a complete template:

{
  "name": "your-theme-name",
  "displayName": "Your Theme Display Name",
  "description": "A beautiful theme for VS Code",
  "version": "0.0.1",
  "publisher": "your-publisher-id",
  "engines": {
    "vscode": "^1.74.0"
  },
  "categories": ["Themes"],
  "keywords": ["theme", "dark", "color-theme"],
  "activationEvents": ["*"],
  "contributes": {
    "themes": [
      {
        "label": "Your Theme Name",
        "uiTheme": "vs-dark",
        "path": "./themes/your-theme.json"
      }
    ]
  },
  "icon": "icon.png",
  "galleryBanner": {
    "color": "#1e1e1e",
    "theme": "dark"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/yourusername/your-theme-repo"
  }
}

Supporting multiple variants

For both dark and light themes:

"contributes": {
  "themes": [
    {
      "label": "Your Theme Dark",
      "uiTheme": "vs-dark",
      "path": "./themes/your-theme-dark.json"
    },
    {
      "label": "Your Theme Light",
      "uiTheme": "vs",
      "path": "./themes/your-theme-light.json"
    }
  ]
}

Note: The first theme listed becomes the default for debugging.

Step 6: Publishing your theme

Install VSCE (Visual Studio Code Extension manager)

npm install -g vsce

Login with your publisher ID:
```
vsce login your-publisher-id
```
Enter the Azure DevOps token when prompted.
Package your theme (optional):
```
vsce package
```
This creates a .vsix file you can share or submit to other marketplaces.
Publish to marketplace:
```
vsce publish
```

Updating your theme

For future updates, use semantic versioning:

vsce publish patch  # 0.0.1 → 0.0.2
vsce publish minor  # 0.0.1 → 0.1.0
vsce publish major  # 0.0.1 → 1.0.0

Once published (verification takes a few minutes), users can:

Open VS Code Extensions panel
Search for your theme name
Click Install
Go to File > Preferences > Color Theme and select your theme

Tips for success

Start simple: Focus on the most common syntax elements first
Test thoroughly: Try your theme with different programming languages
Get feedback: Share with friends or the community before publishing
Iterate: Themes improve with use and feedback
Add an icon: A good icon makes your theme more discoverable

Troubleshooting common issues

Theme not appearing: Check your package.json contributes section
Colors not applying: Verify scope names using the token inspector
Publishing fails: Ensure README.md is customized and all required fields are filled

What’s next?

Once you’ve published your first theme, consider:

Creating seasonal variants
Building accompanying icon themes
Gathering user feedback for improvements
Contributing to the VS Code theming community
Adapat for other interfaces

Conclusion

Building your first VS Code theme is a rewarding experience that makes your daily coding environment truly yours.

You can find all my themes here, hope you like them!

/Michael Andreuzza