No Hassle Visual Code Themes: Publish an Extension | CSS tricks

Creating your theme is the fun part. After you’re done, the next step is to publish your theme so you (and others) can enjoy your creation!

You might think that publishing a VS Code extension would be a simple process, but it isn’t. (Maybe I’m used to the ease of publishing npm packages and take registries for granted.)

Either way, you’ll need to publish your theme in two places:

1. Visual Studio Marketplace for VS Code users
2. Open VSX for other text editors

You may also want to publish to npm so others can easily use your theme for other contexts, such as syntax highlighting via Shiki.

Preparing your theme

When you name your theme, you can’t put it under a scope like @scope/theme-name. If you do this, you will not be able to publish to Open VSX.

So make sure your theme name has no scope. (The theme word is optional):

{
  "name": "twilight-cosmos-theme",
}

To include an icon for your theme you will need a 128px square image file that can be accessed within your project. Place this under the icon property to reference the file:

{
  "icon": "path/to/icon.png",
}

Next, you want to make sure you have a contributes enter your package.json file. VS Code and other text editors look for this to find themes.

{
  "contributes": {
    "themes": [
      {
        "label": "",
        "uiTheme": "vs-dark",
        "path": "./.json"
      }
    ]
  },
}

Finally, you’ll want to include several keywords to make your theme searchable on both VS Marketplace and Open VSX.

If you have trouble with this, give AI your theme file and ask it to generate keywords for you 😉

{
  "keywords": [
    "theme",
    "dark theme",
    "twilight",
    "cosmos",
    "color-theme",
    "dark",
    "purple",
    "blue",
    "vscode-theme"
  ],
}

Publish to Visual Studio Marketplace

Microsoft allows you to publish to Visual Studio Marketplace via vsce if you have a personal access token from a Azure DevOps account.

Unfortunately, while creating this article, I ran into several issues setting up my Azure Devops account, so I had to publish my extension via the manual route.

I’ll talk about both routes here.

Before you can publish, you need a Visual Studio Marketplace account. So, to register for one if you don’t have it yet.

Then do the following:

• Click Publishing extension.
• Create a publisher account.

This step is necessary for publishing both via vsce and the manual route.

Publish via VSCE

For this to work, you need an Azure DevOps account. If you have that, you can create a personal access token these steps.

Note: It’s kind of annoying that you can’t get a lifetime access token with Azure DevOps. The maximum expiration date is approximately one year later.

Also note: I had huge problems creating my Azure DevOps account when I tried this: the backend hung and I couldn’t find the right page even when I copied and pasted the URL! Anyway, don’t worry if this happens to you. You may need to wait one to two days before trying again. It will work eventually.

Once you have the personal access token, the rest of the steps are quite simple.

First, you log in to VSCE with your publisher ID that you created in Visual Studio Marketplace. (Enter the publisher ID, not the user ID!).

npx vsce login 

You must insert the access token when prompted. Then run the following command to publish to the marketplace:

npx vsce publish

And you’re done!

Publish manually

You will have to go this route if, like me, you had problems with the personal access token. Fortunately, it’s also quite simple. You can go to Visual Studio Marketplace and do the following:

• Click Publish extensions.
• Click New extension.
• Use the vsce package command to package your extension as a visx file.
• Drag the packed visx file to upload your extension.

That’s it!

Get verified on Visual Studio Code

If this is your first extension, you can only be “verified” on the Visual Studio Marketplace if your extension is at least six months old. So if you want to get verified, set a reminder within six months visit this page for more information.

Publish to Open VSX

Thanks to Claude, I understood that VS Code uses the Visual Studio Marketplace, but other text editors, such as Cursor, use Open VSX.

Publishing to Open VSX is a little more complex. You must:

• Log in to Open VSX via GitHub.
• Make one Eclipse Foundation account
• Link your GitHub repository to the Eclipse Foundation account.
• Sign their agreement.
• Make one publisher namespace and add this as the publisher in your package.json file.
• Make one access token.
• Then, finally, running npx ovsx publish to publish your package.

Likewise, ovsx will ask you for a personal access token when you try to publish for the first time. Happy, ovsx seems to have a lifetime access token, so we don’t have to worry about it expiring.

Claim the publisher’s namespace

This is essentially ‘verified’ with Open VSX, but Open VSX calls it ‘claiming’ the publisher’s namespace to be verified. Without hammering too much on the language, this process takes a bit of back and forth, but can be done now (instead of six months later).

After you create a publisher namespace, you’ll see a prominent warning sign:

To claim the publisher namespace, you must do so create a GitHub issue with Eclipse Foundation and indicate that you want to claim the namespace.

In that issue:

• Add your GitHub repository (if you make it publicly available).
• Offer to give temporary access to your GitHub repository (if it’s private).

And someone will take care of the rest.

The Eclipse Foundation team seems to be quite responsive, so I wouldn’t worry about communication glitches here.

Includes images for your theme

It makes sense to include images to showcase your theme in the presentation Readme.md file. This allows users to get an idea of ​​your theme colors before deciding whether to download it.

Unfortunately, both VS Marketplace and Open VSX don’t allow you to use relative URLs – images will break if you use relative links from your repository – so you have to link to an absolute URL instead.

The best place to link to is the GitHub repository, as long as it is set to public access.

The URL will look something like this:

![Alt Text](https://raw.githubusercontent.com///master/)

Packing

Publishing your first VS Code editor theme can be tedious. But don’t let that process stop you (and others) from enjoying your theme!

In case you’re wondering, my first theme is called Twilight Cosmos. You can read more about the creation process in my previous article.

Enjoy the (somewhat frustrating) process! Before you know it, you’ve finished it.