Introducing My New VS Code Theme: Purple Puke 💜

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
  ...
}

If you have any difficulties uploading your extension, I highly recommend to follow WebDevSimplified Youtube Video

6 - Test Your Theme:

After publishing, install it directly in VS Code to ensure everything works perfectly and matches your desired design.

This will get your theme out there for other developers to enjoy!

Thank you for reading, and happy theming! 🎉