umma.dev

Here I explain how to build a VS Code theme and publish it to the market place. Relatively straightforward and fun - customise your VS code theme to suit your taste.

Setting Up VSCE

In order to be able to put your theme on the market place, you need to set up vsce (short for Visual Studio Code extensions).

This short guide will take you through the set up required to become a publisher, get a personal token and publish your theme.

Setting Up a Project With Code Generator

Navigate to your terminal, run the following commands to enable the generator globally on your machine and then create a new project.

• npm install -g yo generator-code

• mkdir <file-name>

Go into your project and run the following command

• cd <file-name>

• yo sudo

You will be then asked the type of extension you want to create. Select New Color Theme

You then want to select the No, start fresh option when creating a theme

And then you’ll be prompted to answer the following questions

The extension name

The identifier

A description

Publisher's name

The name that will be shown to users

Light/dark/high contrast theme? (select one)

Editing the Theme

Once you have that all set up, open up your project in VS Code.

Head into the theme folder and open up <your-theme-name> file.

In your file you will be able to see a range of different variables and colours, which you can change.

In order to see the changes made in the theme press f5 +fn if you are on a mac and f5 if you are on windows.

Alternatively you can click on debug on the menu bar and press the button next to the play button. You will see a new window open up called launch.json.

Change the contents of launch.json to the following:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "extensionHpst",
            "request": "launch",
            "name": "Launch Extension",
            "runetimeExecutable": "${execPath}",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}"
            ]
        }
    ]
}

Press the play button and the Extension Development Window should open up. Open up a project you want to test the theme out on.

Be sure to test out what your theme looks like with various different languages.

Variables and Styles

To view an extensive list of all the variables available to change theme colours go here

Choosing Colours

Depending on the type of theme you're building, you're going to want to chose colours which contrast well.

There are many websites which will enable you to put together colours/palettes. A website I like to use from time to time is Khroma

How to Publish to the Market Place

[coming soon]