Announcing VSCodeThemes

Preview themes from the VSCode marketplace.

About 5 months ago I posted a side project to that got relatively popular, and since then I’ve been working on making it useful.

started as an excuse to learn some new tech and challenge myself across the full stack. I knew I wanted to build a web scrapper with / and try out , a search-as-a-service platform.

I was probably browsing themes around the same time. Browsing the for themes can be painful. The site is optimized for browsing extensions so you rely on theme publishers adding screenshots to the readme.

The search results aren’t super useful either. The name, thumbnail and number of installs of an extension are poor indicators of a theme’s quality. Browsing results one by one, hoping there’s screenshot, is a slow and frustrating experience.

I’m happy to announce that I’ve pushed some big updates to the site over the last few months that will help you discover some new awesome themes. Read on for details on some of the more notable updates or see them in action at .

Accurate previews

The first version had a major flaw — the syntax highlighting was horribly inaccurate. A pretty essential feature for a site who’s only purpose is showing theme previews.

I originally used the component for displaying code previews but it uses under the hood — which is not what VSCode uses for it’s syntax highlighting.

This meant I had to translate VSCode themes to PrismJS themes and resulted in widely inaccurate previews (in addition to some pretty nasty code). After digging around the VSCode source, I found the package that’s responsible for outputting color tokens for a given theme, language and template. This library depends on native modules so I couldn’t simply add it to the front-end. The latest update now pre-renders each language preview for a theme before saving the result to Algolia.

Syntax highlighting before and after Check out for more details on how this works.

“Wasted space”

Since I was primarily focused on the back-end at the start of the project, the front-end was a bit of an afterthought. It looked pretty and worked well on mobile but the overall experience needed some love. One complaint was all the on desktop because of the single column layout. Switching to a responsive grid layout creates a faster, more enjoyable browsing experience.

Search results before and after

Extension pages

As a frequent r/vscode lurker, you will see the occasional post, requests for and new . It became clear that a unique extension page would allow users to easily link to and share any theme on VSCodeThemes — like one of my personal favorites .

Extension page with theme rotator Check out for more details on the front-end rewrite.

Other updates

In addition to some cool new features, there have been some major updates to the stack such as:

• Ported front-end to for improved SEO.
• Added a CDN to improve page-speed and scalability.
• Setup for shared packages between the back-end and front-end.

… and a bunch of .

What’s next?

A few possible features that are at the top of my mind right now:

If you would like to see these features built or have other suggestions feel free to .