Create and publish a VS Code theme.Step by step.
Tags: css, vscode, javascript, webdev
Published: 2022-01-31 13:28:40

## Hello Everyone


....– Hey Michael! we don't need more tutorials on how to build a theme, there's 100s!
You may say...

I,...simply wanted to do my version because I have been building my own theme and is easier than you may think.
- [My theme, Serendipity](https://serendipitytheme.com/)

## But why bothering to build my own theme, if there's thousands of them out there?

Well, because for example in my case, I spend more time working on VS Code than around internet while working on two of my side projects, [Wicked Templates](https://www.wickedtemplates.com/) and [Wickedblocks](https://wickedblocks.dev/). After a while, if you have a poorly crafted theme, so your eyes are going to hurt.

Taking into account that you spend a lot of hours working on VS Code, you may want to created or adapt it to your taste and personality. Believe it or not, this will make you more productive and feel comfortable when working.

## Let's get our hands dirty.

First of all, you can customize the theme you are actually using by opening the **User settings** on VS Code your **command palette**

Once you are there you can edit the .json by starting with this:

```
{
  "workbench.colorCustomizations": {
    ---- Styles go here ----
  }
}
```
You can see all the scopes here:
- https://code.visualstudio.com/api/references/theme-color


But, this is a nightmare to be honest, as you can see there's a lot of scopes and it will take you ages to do it.

## Let's create our own theme from scratch

We are going to need:

- A laptop
- VS Code installed
- Microsoft Azure Account
- Microsoft Marketplace Account
- GitHub Account
- Patience

We are going to use:
- VS Code
- Terminal
- VS Code Debugger
- A random but useful color tool

For color palettes you use my tool [Colors & Fonts](https://www.colorsandfonts.com/)

or for something more advance, use [Coolors](https://coolors.co/)


## First and foremost

Let's grab the command line tool called [Yo Code extension generator](https://www.npmjs.com/package/generator-code), which it will create all the files you need to build your theme. 

Only build, not publish but more on this later on.



1. Open up your terminal window and navigate to your main GitHub folder.
2. Then run on the terminal:

```
npm install -g yo generator-code
```
After the it finishes to install run:

```
yo code
```
You will get all this options.

**Select:**
1. **New Color Theme**

What type of extension do you want to create? (Use arrow keys)
  New Extension (TypeScript) 
  New Extension (JavaScript) 
**❯ New Color Theme**
  New Language Support 
  New Code Snippets 
  New Keymap 
  New Extension Pack 
  New Language Pack (Localization) 
  New Web Extension (TypeScript) 
  New Notebook Renderer 


**Select**:
2. **No, start fresh**

Do you want to import or convert an existing TextMate color theme? (Use arrow keys)
**No, start fresh **
Yes, import an existing theme but keep it as tmTheme file. 
Yes, import an existing theme and inline it in the Visual Studio Code color theme file.

Then you will be asked this questions.If you are going to create this theme to be publish and grow it into a UI Theme a  part of for VS Code, you may want to think about how you name it.

## Important step

> Let's say you name it "A" this name you can change it afterwards, as the rest of answers you give but, if you change the identifier and you publish again, this will create a different theme on VS Code Marketplace

3.Answer


What's the name of your extension? Your Theme's name
**_? What's the identifier of your extension? Your Theme's identifier_**
? What's the description of your extension? Your Theme's Description
? What's the name of your theme shown to the user? Your Theme's name


Then we are going to need a starting point and Yo Code gives you the choices so choose the one you want to.

Select a base theme: (Use arrow keys)
❯ Dark 
  Light 
  High Contrast 

4. Answer

**Initialize a git repository? (Y/n)** 

I say always no because is not always working...so I simply push afterwards.

5. Open do it as you wish.

Do you want to open the new folder with Visual Studio Code? (Use arrow keys)
❯ Open with `code` 
  Skip 


## Files

This are the files generated by Yo Code

![files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8h9v2s54lgcz16g33cu.png)
 

Let's go through some of the files.

**1. .vscode/launch.json** 

You won't use the file but is good to know what it is for.

> The launch.json file is used to configure the debugger in Visual Studio Code.


**2. themes/your-theme.json**

This is the file you are going to be working on to create your theme. Right now it includes the styles for VS Code default theme.


**3. .vscodeignore**

Basically like .gitignore

> A VSCODEIGNORE file is a text file used to exclude unnecessary files when packaging a Microsoft Visual Studio Code extension.

**4. Changelog.md**

You can write this changelog and if you publish it marketplace will link to it directly.

**5. package.json**

On this file is where we are going to pack, add and write some code to be able to publish it on the marketplace.

**6. readme.md**

This is well, the read me. Which you are going to edit before you publish, otherwise you won't be able to do so because is detected.

**7. vsc-extensions-quickstart.md**

Is basically telling you what all the files are but on a short way.


## Building your theme

So, let's go to  "your-theme.json" file on the themes folder

![file ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjf7ui3dhus62p75hxyw.png)
![another file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acmb5eruzelih4n13sw3.png)
  
 

You will see two sets of colors:

Set is mostly for the UI
```
"colors": {
--- scopes go here ---
}
```


Set for syntax.
```
"tokenColors": [
--- scopes go here ---

]
```

So how do you know what to style? Well in this case we can press F5 or simply navigate on VS Code to the menu and click on RUN/Start Debugging.

When you do this it will open another VS Code window showing you the theme colors on the json file. Now you will have two VS Code windows open.

In my case the left is my VS Code and right is the theme I am debugging.

![Imageeee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv1qx60znnpehyhilsl0.png)
 

When you have the window open search for "Inspect editor tokens and scopes"

![Ima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r5zq2o2i6fiv3jm066n.png)
 

After you activate it you can click on the editors scopes and it will popup a window with all the information about it.

![another image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwxu6878w9jh4gj7ites.png)
 
  

The information you want to get from here is the textmate scopes you can see that there is a hex color applied, look for it and change the color.

![lskjn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vnk2p6rs97dx5jdciyw.png)
 


## Publish your theme

To publish your theme we will need to do some boring work but is less cumbersome to be able to share your theme.

- Sign up to [Microsoft Azure DEVOPS](https://dev.azure.com/)
- Create an organization
- Publish it


**Signing up and creating an organization**

- Sign up

- Once in
> Click on the icon next to your avatar and select **_personal access tokens_**

- New Token
> Name it


- Organizations
> All accessible organizations
![Image ökjb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7b7qw61u0dc9gd1m0kt.png)
 
 


**Click on "Show all scopes", right at the bottom** and look for **_Marketplace_** and check:
- Manage
- Click to generate the access token

_**Copy the token and save somewhere you think is save.**_

![Image .kjbl hkb ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21t6ov68gwb18iiji0dt.png)
 


**Inside the marketplace**

- Navigate to the [Microsoft Marketplace](https://marketplace.visualstudio.com/) and log in.

There should be a "Create publisher" page.
![Image ubyffkf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8kw4e44gzd2ix4vgj3z.png)
 
 
 
Fill up all the fields.

After that you will be redirected to this page. Save this page for later use. **_Remember your passwords....!_**

![Image ouygoyg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi214l6orxo8ctmloamd.png)
![Image ihbuybl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ixckkow5u64yvbzbdgn.png)
 

## Going back to our package.json


The package.json files is not completed when yo code generates it for you, the marketplace requires other scopes like, icons, keywords, publish id and so on.

Feel free to use this template that I made, is basic, but that's all you need.


{% gist https://gist.github.com/michael-andreuzza/d5d535a521a120467fd4d5dfd5523e83 %}


If you are going to make dark and light version you will have to link both of json files here.

as you can see there's a difference for the light themes:


```
"uiTheme": "vs-dark",
"uiTheme": "vs",
```
Formatted the contributes like this, stack the theme's like this.
```
 "contributes": {
    "themes": [
      {
        "label": "Your dark theme name",
        "uiTheme": "vs-dark",
        "path": "./themes/your-dark-theme-name.json"
      },
      {
        "label": "Your light theme name",
        "uiTheme": "vs",
        "path": "./themes/your-light-theme-name.json"
      }
    ]
  }
```
The first theme is the one that is going to be debugged as default, if you want to debugged the light, in this case you will have to put it on the top, so the debugger can identify which theme you want to debug.




## LEt's install VSCE so we can push our theme to the marketplace.

Write this command on your terminal

`npm install -g vsce`



After is installed you will have to log in:

`vsce login your-publish-id`

it will for the login code, now is when you need to paste the token that we generated before.

To package your theme run

`vsce package`

it will create a vsix file. 

> Note: This file you also use to publish on openVSX

Publish your theme by running:

`vsce publish`

if all goes as it should, you will get a terminal msg and/or an email that your theme has been published.


Go to your publisher page and you should see your theme deployed, it will say verifying, just be patience, it takes some minutes.

Look for your live extension on the marketplace by clicking the menu on this ones.

![Image grsduvtr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjz6cc0d6ul4zt9oyqzl.png)
 
 
If you want to update your theme and publish again, all you instead of running:

`vsce publish`

you can run:

`vsce publish minor`

just make sure you are logged in every time you do so.


## Installing your theme on vs code.

Go to the extensions search bar on VS Code and look for your theme, click install and ready to rock.

## IF you have any questions

Feel free to ask here or on twitter: https://twitter.com/Mike_Andreuzza

/Mike