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:
- 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! π
Top comments (0)