• Years ago, when I read Sarah Drasner’s article on creating a VS Code theme, I silently thought to myself, That’s a lot of work… I’m never going to make a theme… But lo and behold, I went ahead and made one - and it took less than six hours to get most of the theme working, then a day or two to polish up my final tweaks. • In this article, I want to you walk you through my process of creating this theme - along with the actual steps I took to create it. • I think talking about the process is powerful because I went from Nah, too much work to Oh, I can do it to It’s done..? • all within a matter of hours. • (The rest is simply time spent polishing). • I never wanted to make a VS Code theme… I was in the middle of redesigning my website.
Article Summaries:
- A developer recounts building a custom Visual Studio Code theme in under a day, using Shiki’s CSS‑variable theming to quickly align code syntax highlighting with a new website design. After initial experiments with Dracula and other popular themes, the author leveraged AI to scaffold a Shiki theme and generate CSS variables for foreground, background, and token colors. To achieve finer control over code blocks, the process shifted from CSS variables to TextMate token scopes, again with AI assistance to scaffold and refine the theme. The result is a polished, site‑consistent VS Code theme that was created in a matter of hours.
Sources: