How To Create A Custom Visual Studio Code Theme

3.1K

Ready to create a custom VS Code color theme that best captures your personality?

We recently released Pink Panda, a cozy dark VS Code color theme that you can download and use right now for free.

Try Pink Panda for free in THT’s Resources page!

I’m proud to say that while making Pink Panda we also nailed down what’s probably the easiest way to create custom VS Code themes 🙌

This post will show you how to create your own custom VS Code theme that you can use, sell, or make available in the community.

And, with our wicked simple approach, you can personalize your coding experience by adding your own flair to one of the best text editors out there!

Don’t have VS Code installed? Check out Download A Code Editor In 4 Easy Steps (Coding For Beginners) for how to get started with VS Code editor!

Tools we’ll be using

The following are the main tools and resources we’ll be using to build our custom VS Code theme.

Color Palette

There are two main tools we used to generate Pink Panda’s colors, though, they’re by no means the only tools available.

Canva’s color palette generator proved super useful and inspiring so we naturally stuck to it.

Pink Panda was inspired by the pastel blonde, indigo, and in a trance color palettes.

To find complementary accent colors, we used a shades generator to create a cohesive color scheme.

Tip: Decide on a color palette from the start instead of choosing and picking as you go to avoid many headaches down the road.

Theme Generator

We started building our custom theme the hard way but eventually discovered the best way.

Here’s a breakdown of our process because learning is a journey…full of mistakes 😆

What we started with…

It was a video from Coder Coder on YouTube that inspired us to create a custom VS Code theme so it was natural we started out by using her VS Code theme color generator.

Now, it’s an okay tool to get you up and running but it won’t get you to the finish line. At least, not by itself – you’ll need to employ some craftiness.

Coder Coder’s generator tool works by you providing the different colors that make up your theme.

Keep in mind the tool is basic so there are no labels or descriptions identifying what the colors you enter affect.

You provide dark or light accents and main colors that are then appropriated based on the logic of the program to different VS Code color theme properties.

The generator then provides a JSON file you can copy and further personalize.

We had to use the VS Code extensions API documentation to identify properties that required further modification.

Not gonna lie, there were plenty of adjustments we had to make and the whole project was taking up way too much time 😔

What we ended up using…

I think y’all know by this point DM is the only one who wastes time around here (he’s going to roast me for this 🫢).

Imagine my outer surprise when I stumbled on VS Code’s own theme studio, a UI interface build specifically for customizing the editor’s theme colors.

In premise, it’s similar to Coder Coder’s custom theme color generator but with a big advantage. VS Code Theme Studio does a marvelous job of showing you what you are changing!

This means no more searching through the API documentation, no more combing through with the developer tools for property identification, and no more hair-pulling. Whew.

Decide on a color theme

I’d say the hardest part of this project is settling on a color theme to carry out ’till the end.

You don’t realize the difficulty in making sure color shades and contrasts flow well together until they stare you in the face.

It helps if you keep accessibility in mind especially if you aspire to create a theme other people will use.

Is the text hard to read? Are the colors too jarring to the eye?

These are the kinds of questions to ask yourself as you put your color palette together.

Your finished color palette will determine the overall feel and general mood of the text editor. It will, also, play a very big part in usability!

Create the theme files

Once you have a preliminary color theme in mind and a ready-to-apply color palette, the next step is generating the theme files for the extension.

Note: I say “preliminary” because you’re bound to adjust and change things as you go.

Don’t feel bounded by your initial color selections, though, a great color palette can generally hold its own despite minor adjustments 💁‍♀️

We followed the detailed instructions of Coder Coder for installing and setting up the yo code extension generator.

Tip: Make sure you have Node.js and Git installed!

Installing yo code does the basic yet vital part of setting up the necessary JavaScript files to build your extension on.

Think of it as a project boilerplate that makes our life easier.

Note: We’re not going to reiterate the installation here as the video linked above does a thorough job.

Once the theme files are created, open the project directory on the editor and locate the themes folder. In there, you’ll find the JSON file that contains the default theme colors and styles.

Best way to add custom styles to VS Code theme

As mentioned previously, we started building Pink Panda with Coder Coder’s theme generator tool but ended up with too many things that needed adjusting.

A take away suggestion is to use debug mode (F5 key) for a live preview of the theme!

Previewing theme color changes using debug mode

Turn on debug mode to see what the modified editor’s theme will look like.

A preview window will open with your VS Code editor that will reflect code changes from the original (where debug mode is enabled).

In that debug preview window, we opened the developer tools by navigating under Help > Toggle Developer Tools.

The result is a near identical panel with the Google Inspect tool.

Use the debug editor developer tools to identify the reference elements using class and id attributes. In this way, you’ll know what’s considered a list tree item, an action item, or an activity bar item.

Figuring out the VS Code theme API properties

Once you identify the item you want to affect, use the VS Code theme documentation API (linked in the tools section above) to figure out its property name.

As word of caution, the id or class of an element doesn’t always help identify its respective property.

If this entire process sounds like a lot of minute detail work, that’s ’cause it is very much so 😔

That’s why we were terribly happy when we found the VS Code theme studio editor!

Theme studio editor is created with the purpose of customizing a VS Code theme. It generates a JSON file which you can download to either insert or copy and paste into your project files.

The best part is that VS Code theme studio is equipped with a real-time preview panel.

This means you don’t blindly set different colors, copy the generated JSON file in your theme file folder in your editor, and then enter debug mode to preview 🥴

The easiest way to create a custom VS Code theme

By far, the best method to build a custom VS Code color theme includes a combination of VS Code theme studio and the VS Code API documentation (for minor adjustments).

We approached the build process as follows:

1. Use the theme studio to change default properties based on our color palette
2. Download the JSON file to upload in the yo code custom theme package
3. Preview the JSON file using debug mode to identify inconsistencies
4. Reference the API documentation for any missing properties that need a color change (we ran into one or two instances, otherwise the theme studio is pretty comprehensive)

When all set and done with adjusting, the next step is to publish the color theme on the extension marketplace.

You don’t need to publish your theme on the marketplace to use it! But if you want others to be able to use it, then continue on to the next steps.

Publish your custom theme on the VS Code marketplace

Follow Coder Coder’s concise directions on publishing or follow equally helpful instructions outlined in VS Code’s documentation.

We found both sets of instructions easy to understand and carry out so you won’t go wrong either way!

Note: You’ll need to create an account with Microsoft and then register a new project in the VS Code marketplace before publishing anything.

As a mini breakdown:

• Install vsce, the CLI tool you’ll need to package and publish your theme files
• Modify files like package.json (it hosts details of your project) and README.md (presents a landing page)
• Obtain a personal access token from Azure DevOps which is required when publishing the extension (you get it when registering your project on the marketplace page)
• Publish the extension using the publisher credentials in the command line (you’re presented with prompts when running the vsce commands)

You can find each step listed above both in the documentation linked at the start of this section or Coder Coder’s video.

Customizing the theme’s marketplace landing page

We’re now at a point where we’ve completed our custom theme and are able to publish it on the marketplace.

There’s still one more step left to undertake and that’s customizing the marketplace landing page of the theme for presentation purposes.

We chose three customizations:

1. adding a theme icon
2. setting a banner display to complement the icon
3. including screenshot images showcasing the theme styles and colors in the README body

All customizations are optional but highly encouraged to create a visually pleasing display of the hard work that went into creating your theme.

For steps one and two, simply modify the package.json file by adding the icon and galleryBanner properties.

You can reference Pink Panda’s package.json file on GitHub.

The icon and screenshots entail hosting the images on GitHub to pull onto our modified package.json and markdown files.

Note 👉 It’s not a requirement to host image assets on GitHub – any server will do! But GitHub offers a convenient server that’s already set up for our use.

Be aware that running into small issues when re-publishing is to be expected.

And, naturally, we ran into the following error when trying to publish our updated package 🙄

“Part URI is not valid per rules defined in the Open Packaging Conventions specification.”

The error resulted from the naming convention of the image files which included spaces between words.

To solve the error, rename image files to no-space alternatives.

So an image called “my icon.png” should be “my-icon.png” or “my_icon.png” or any valid character other than a space.

Updating a published custom VS Code theme

You’ll find small things to fix long after you publish your theme as you fine-tune it. Luckily, updating a custom theme is relatively easy and done in only three steps.

1. Log in to your marketplace account: npx vsce login [username]
2. Package the theme with your updates: npx vsce package
3. Publish your new package: npx vsce publish [optional set version]

Note: You might not need to use the npx command if you’ve installed vsce at a global level. Our install is local to this project directory so we’re using npx!

Your custom VS Code theme is now complete and you’re equipped with the how-to for maintaining it.

Check out Pink Panda (and other THT freebies) by visiting our Resources page located on the navigation menu. The full package source code is available on GitHub.

‘Till the next adventure, happy coding THT-ers!

(DM says I got too far…) 🐼