Creating a VSCode Theme

Creating a VSCode Theme

Tags in this post:

I have been in the SurrealDB docs quite a bit recently, and I’ve come to love the theme they use for code on their site, so much so I went ahead and spent some time coming up with something close. Here’s how I did it.

First, I found Theme Studio for VSCode and went to editing. They give you access to a TON of stuff to edit, and the realtime preview is awesome. But alas, when I was done, there were some things that weren’t working.

Some of the tokens in the editor weren’t getting colored properly, and there were some UI elements missing (or perhaps I overlooked in the online editor.) Nonetheless, I used VSCode’s internal “Developer: Generate Color Theme From Current Settings” to export all of the colors, and then moved that into my settings file. I then used “Developer: Inspect Editor Tokens and Scopes” to find hex colors for tokens I needed to change. Next the fun part…

I proceeded to search for the offending color value in my settings, change it, save, and see what that did. This led me down a rabbit hole, but it was the right one none-the-less. I was able to change every color I needed to. And so, I give you, the Unofficial SurrealDB Theme for VS Code.

PRs welcome!