Introducing My New VS Code Theme: Purple Puke 💜

#vscode #themes #programming #tutorial

Hey devs! 🎉 I'm excited to introduce Purple Puke, my new VS Code theme! If you're craving a bold, purple-filled coding vibe, this theme is for you. With vibrant purples, contrasting shades, and a perfect light-dark balance, it makes your code pop!

How to Create Your Own VS Code Theme.

Want to create your own VS Code theme? Here’s a step-by-step guide that walks you through the process. It’s a fun project if you want to personalize your coding environment or share something cool with the community.

1 - Install the Yo Code Generator

First, we’ll use the yo code generator, which simplifies the process of building a VS Code extension.

Open your terminal and install yo and generator-code globally:

npm install -g yo generator-code

2 - Generate a New Theme Extension

Next, run the following command:

yo code

Select New Color Theme from the options.
Choose whether to start from a dark, light, or high contrast theme.
Name your theme and choose the base theme (if you’re planning to modify an existing one).
The generator will create the necessary files for you, including a sample theme.

3 - Modify the Theme Colors

After generating the files, you’ll find a JSON file that contains the color information for your theme. This is where the magic happens!

Open the themes/your-theme-name-color-theme.json file.
Modify the colors for various UI elements and syntax highlighting. For example, here’s how you can define colors for comments and keywords:

{
  "name": "Purple Puke",
  "colors": {
    "editor.background": "#2D2B55",
    "editor.foreground": "#F8F8F2"
  },
  "tokenColors": [
    {
      "scope": "comment",
      "settings": {
        "foreground": "#75715E",
        "fontStyle": "italic"
      }
    },
    {
      "scope": "keyword",
      "settings": {
        "foreground": "#FF79C6"
      }
    }
  ]
}

4 - Test Your Theme

You can test your theme by pressing F5 in VS Code, which will open a new window where you can see your theme in action. Make changes in the JSON file, save, and then refresh to see updates.

5 - Package and Publish Your Theme

Once you’re happy with your theme, it’s time to publish it to the Visual Studio Code Marketplace!

First, install vsce, the VS Code extension manager:

npm install -g vsce

Then, create vsce package:

vsce package

Lastly follow Visual Studio Code article to publish your extension:

Publish Extension

Note, add published ID to package.json:

{
  "name": "extension-name",
  "displayName": "extension-display-name",
  "description": "a short brief description",
  "version": "0.0.1",
  "publisher": "yourPublisherID",  // <- Add this field
  ...
}