DEV Community

Cover image for 🎨 Creating Your First VSCode Extension Theme
Alvin James Bellero
Alvin James Bellero

Posted on • Updated on

🎨 Creating Your First VSCode Extension Theme

Visual Studio Code (VSCode) is a popular open-source code editor developed by Microsoft. With its flexible and extensible architecture, developers can customise and enhance their editing experience by creating their own extensions.

Recently, I decided to publish my own, preferred theme to Visual Studio Marketplace, ThemeNemo.

ThemeNemo in VSCode Marketplace

If you're looking for other themes, please check this out! 💯 🤜🤛


In this article, I will guide you through the process of creating your first theme (based on my own experience).

Whether you're a seasoned developer or just getting started, this will help you get up and running.

This is your lucky day!


⚡ Set up your Development Environment

To start creating your VSCode extension, you'll need to set up a development environment on your machine. This typically involves installing Visual Studio Code and Node.js.

  • For VSCode Installation, refer here.
  • For Node and NPM installation, you can check this article.

✨ Create a New Extension Project

Once your development environment is set up, you can create a new extension project using the VSCode Extension Development Kit (VSCode-EDK) or the Yeoman generator for VSCode extensions.

npm install -g yo generator-code
Enter fullscreen mode Exit fullscreen mode

🏃 Run "Yo Code"

The Yeoman Generator will walk you through the steps required to create your customisation or extension prompting for the required information.

To launch the generator simply type:

yo code
Enter fullscreen mode Exit fullscreen mode

The CLI will walk you through the generation process and asks you about your extension's preference. Please refer to the actual generation below.

Yo Code Generator


AND ... VOILA! 🎉

You have now successfully generated your theme files! Open it in VSCode and here's the file list looks like.

VSCode Editor showing generated files

Fist Bump Baymax

AWESOME! ... But wait! There's more! 👀


🔧 Debug Your Extension

You may be wondering how the default theme looks like. To view it, go to your MenuRun and choose Start Debugging (F5).

This will open a new instance of VSCode Editor and provides you your debugger tools from your main editor.

VSCode Debugger Window

This is the bare, default theme of VSCode 😕


🎨 Customise Your Theme

Start changing the colour values inside the JSON file. It will automatically be reflected to the Debugging Window after you save it.

Isn't it nice? 🤯


💥 Bonus Tip!

During the process of my theme creation, it is really hard for me tell which part of VSCode is changing whenever I update a particular set of colours from the JSON file.

So I searched the internet and found this gem! 💎

https://themes.vscode.one/

With Theme Studio, you can easily customise your own theme using their visual tools, change it the way you like and even get inspiration from existing themes in the community by forking their themes! 💯

Theme Studio - Editing ThemeNemo


🚀 Publish Your Theme Extension

Finally, once your extension is complete and tested, you can publish it to the VSCode Marketplace so that others can use it.

This involves creating a publisher account, packaging your extension, and submitting it for review by the VSCode Team.

⚡ UPDATE: I created a separate post for that here if you want to know more.

Just follow the steps and see your theme in the marketplace in all of its glory!

That's all folks! You can also share your experience in the comments section below.

P.S. Don't forget about your theme logo! 😆


SpongeBob, we did it!

Top comments (0)