How to create a theme for Visual Studio Code

May 2, 2021

Yesterday I was porting my theme from Sublime Text to VS Code, that's why the image of the day is a screenshot of my theme in VS Code.

Why did I start doing this at all? Honestly, I did not want to spend a whole day figuring it out. But I got used to my IDE colors too much. When I changed my IDE to Sublime, I modified Sublime's Monokai theme. Now I like VS Code and I had to сopy my colors to this IDE to keep myself happy.

Anyway, here is how a theme can be created by modifying an existing one:

Install a VS Code theme where the color palette is similar to the desired one. This will be a source theme.
Adjust colors by changing editor.tokenColorCustomizations section in Settings JSON. Probably you won't be able to achieve desired settings on this step because you just cannot cancel some settings in the source theme.
Create a new theme based on the current color settings.
Test new theme and make the final tweaks by modifying <theme name>-color-theme.json file in the new theme. The changes can be previewed immediately in an Extension Development Host window. Run it by pressing F5.
Package and publish the new theme to finish the flow, to feel great, and to host it forever and free on the VS Code Marketplace:
- Create an account at dev.azure.com
- Get a personal access token
- Create a publisher
- Publish the theme by uploading manually or from the command line. The second way is much faster and cooler. VS Code Terminal will work perfectly. And it worked for me while the native command line did not.

Overall, it's pretty easy. Except the color settings: most of the time I spent on editor.tokenColorCustomizations from step #2.

And here is my theme: Homogenus. Also, it's on this page background.