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. r/vscode started as an excuse to learn some new 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. VSCodeThemes tech AWS Lambda SQS Algolia 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. Visual Studio Marketplace 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. results one by one, hoping there’s screenshot, is a slow and frustrating experience. Browsing 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 component for displaying code previews but it uses under the hood — which is what VSCode uses for it’s syntax highlighting. react-syntax-highlighter PrismJS not 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. vscode-textmate 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. this PR “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. “wasted space” Search results before and after Extension pages As a frequent r/vscode lurker, you will see the occasional post, requests for and new . “what theme is this?” theme suggestions 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 Extension page with theme rotator Check out for more details on the front-end rewrite. this PR 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. NextJS Added a CDN to improve page-speed and scalability. CloudFront Setup for shared packages between the back-end and front-end. yarn workspaces … and a bunch of . bug fixes What’s next? A few possible features that are at the top of my mind right now: Adding more languages Favorites Icon themes If you would like to see these features built or have other suggestions feel free to . contribute on Github

Amazon

BUNCH

Microsoft

Super

Too Long; Didn't Read

Get free API security automated scan in minutes

Announcing VSCodeThemes

Too Long; Didn't Read

Companies Mentioned

@_jschr

RELATED STORIES