🎨 Creating Your First VSCode Extension Theme
Tags: vscode, opensource, theme, themenemo
Published: 2023-02-15 14:05:31

[Visual Studio Code (VSCode)](https://code.visualstudio.com/) is a popular open-source code editor developed by [Microsoft](https://www.microsoft.com/). 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](https://marketplace.visualstudio.com/search?term=themenemo&target=VSCode&category=All%20categories&sortBy=Relevance), **ThemeNemo**.

<a title="Click to try it out!" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=AlvinJamesBellero.theme-nemo"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft46dd43tr4u01pczdqj.png" alt="ThemeNemo in VSCode Marketplace" /></a>
> 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.

<img src="https://media.giphy.com/media/l4EoNaDgYsHa6vL9K/giphy.gif" alt="This is your lucky day!" />

-------------------------------------------------------------

## :zap: 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](https://code.visualstudio.com/).
- For **Node** and **NPM** installation, you can check this [article](https://dev.to/whotarusharora/how-to-install-npm-and-node-js-on-mac-and-windows-35he).

-------------------------------------------------------------

## :sparkles: 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
```

-------------------------------------------------------------

## :running: Run "`Yo Code`"

The [Yeoman Generator](https://yeoman.io/) 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
```

The [CLI](https://en.wikipedia.org/wiki/Command-line_interface) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc3v7vpnt95wjop50zt2.gif)

-------------------------------------------------------------

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbh8rkj97zgav5v4kewy.png)

<img src="https://media.giphy.com/media/9G52mAJTInGVy/giphy.gif" alt="Fist Bump Baymax">

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

-------------------------------------------------------------

## :wrench: Debug Your Extension

You may be wondering how the default theme looks like. To view it, go to your **Menu** → **Run** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyq2zi8oittlu7y16va7.png)

> This is the bare, default theme of VSCode 😕

-------------------------------------------------------------

## :art: 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? 🤯

-------------------------------------------------------------

## :boom: 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/](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjcn04qegx9efr4tunzm.png)

-------------------------------------------------------------

## :rocket: 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.

> :zap: UPDATE: I created a separate post for that [here](https://dev.to/shiftescape/publishing-your-extensions-to-visual-studio-marketplace-49ma) 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!** 😆

-------------------------------------------------------------

<img src="https://media.giphy.com/media/nTqBNQXlEixLa/giphy.gif" alt="SpongeBob, we did it!" />