DEV Community

Ahmed Makki
Ahmed Makki

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

2 - Generate a New Theme Extension

Next, run the following command:

yo code
Enter fullscreen mode Exit fullscreen mode
  • 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"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  • Then, create vsce package:
vsce package
Enter fullscreen mode Exit fullscreen mode
  • 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
  ...
}
Enter fullscreen mode Exit fullscreen mode

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! ๐ŸŽ‰

Top comments (0)