Announcing VSCodeThemes

Preview themes from the VSCode marketplace.

Jordan Schroter
Jul 21, 2018 · 3 min read

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

VSCodeThemes 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 AWS Lambda / SQS and try out Algolia, a search-as-a-service platform.

I was probably browsing themes around the same time.

Browsing the Visual Studio Marketplace 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 https://vscodethemes.com.

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 react-syntax-highlighter component for displaying code previews but it uses PrismJS 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 vscode-textmate 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.

Image for post
Syntax highlighting before and after

Check out this PR 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 “wasted space” on desktop because of the single column layout. Switching to a responsive grid layout creates a faster, more enjoyable browsing experience.

Image for post
Search results before and after

Extension pages

As a frequent r/vscode lurker, you will see the occasional “what theme is this?” post, requests for theme suggestions and new theme announcements.

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 Raijū by TobiasTimm.

Image for post
Extension page with theme rotator

Check out this PR 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 NextJS for improved SEO.
  • Added a CloudFront CDN to improve page-speed and scalability.
  • Setup yarn workspaces for shared packages between the back-end and front-end.

… and a bunch of bug fixes.

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 contribute on Github.

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Jordan Schroter

Written by

Full Stack Developer & UX Enthusiast

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Jordan Schroter

Written by

Full Stack Developer & UX Enthusiast

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store