Preview themes from the VSCode marketplace.\n-------------------------------------------\n\nAbout 5 months ago I posted a side project to [r/vscode](http://reddit.com/r/vscode/) that got relatively popular, and since then I’ve been working on making it useful.\n\n[VSCodeThemes](https://vscodethemes.com/) started as an excuse to learn some new [tech](https://hackernoon.com/tagged/tech) and challenge myself across the full stack. I knew I wanted to build a web scrapper with [AWS Lambda](https://aws.amazon.com/lambda/) / [SQS](https://aws.amazon.com/sqs/) and try out [Algolia](https://www.algolia.com/), a search-as-a-service platform.\n\nI was probably browsing themes around the same time.\n\nBrowsing the [Visual Studio Marketplace](https://marketplace.visualstudio.com/) for themes can be painful. The site is optimized for browsing extensions so you rely on theme publishers adding screenshots to the readme.\n\nThe 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](https://hackernoon.com/tagged/browsing) results one by one, hoping there’s screenshot, is a slow and frustrating experience.\n\nI’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.\n\nRead on for details on some of the more notable updates or see them in action at [https://vscodethemes.com](https://vscodethemes.com/).\n\n### Accurate previews\n\nThe 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.\n\nI originally used the [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) component for displaying code previews but it uses [PrismJS](https://prismjs.com/) under the hood — which is _not_ what VSCode uses for it’s syntax highlighting.\n\nThis meant I had to translate VSCode themes to PrismJS themes and resulted in widely inaccurate previews (in addition to some pretty nasty code).\n\nAfter digging around the VSCode source, I found the [vscode-textmate](https://github.com/Microsoft/vscode-textmate) package that’s responsible for outputting color tokens for a given theme, language and template.\n\nThis 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.\n\n!(https://hackernoon.com/hn-images/1*G6jdG6BuoC6xaU0Gkxq8iw.png)\n\nSyntax highlighting before and after\n\nCheck out [this PR](https://github.com/jschr/vscodethemes/pull/83) for more details on how this works.\n\n### “Wasted space”\n\nSince 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.\n\nOne complaint was all the [“wasted space”](https://github.com/jschr/vscodethemes/issues/82) on desktop because of the single column layout. Switching to a responsive grid layout creates a faster, more enjoyable browsing experience.\n\n!(https://hackernoon.com/hn-images/1*Q1Mvey1cmaTT1Lm-AegG9g.png)\n\nSearch results before and after\n\n### Extension pages\n\nAs a frequent r/vscode lurker, you will see the occasional [“what theme is this?”](https://www.reddit.com/r/vscode/comments/8u1rp1/does_anyone_know_what_is_the_name_of_this_theme/) post, requests for [theme suggestions](https://www.reddit.com/r/vscode/comments/8mjkzo/light_theme_recommendations/) and new [theme announcements](https://www.reddit.com/r/vscode/comments/8ektek/new_theme_iceberg/).\n\nIt 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](https://vscodethemes.com/e/TobiasTimm.raiju).\n\n!(https://hackernoon.com/hn-images/1*ORBsmsbV7mZAtf_Wt6ADdw.png)\n\nExtension page with theme rotator\n\nCheck out [this PR](https://github.com/jschr/vscodethemes/pull/88) for more details on the front-end rewrite.\n\n### Other updates\n\nIn addition to some cool new features, there have been some major updates to the stack such as:\n\n* Ported front-end to [NextJS](https://github.com/zeit/next.js/) for improved SEO.\n* Added a [CloudFront](https://aws.amazon.com/cloudfront/) CDN to improve page-speed and scalability.\n* Setup [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) for shared packages between the back-end and front-end.\n\n… and a bunch of [bug fixes](https://github.com/jschr/vscodethemes/issues?utf8=%E2%9C%93&q=is%3Aclosed+label%3Abug).\n\n### What’s next?\n\nA few possible features that are at the top of my mind right now:\n\n* [Adding more languages](https://github.com/jschr/vscodethemes/issues/59)\n* [Favorites](https://github.com/jschr/vscodethemes/issues/101)\n* [Icon themes](https://github.com/jschr/vscodethemes/issues/87)\n\nIf you would like to see these features built or have other suggestions feel free to [contribute on Github](https://github.com/jschr/vscodethemes).