Start using any VSCode theme directly in CodeSandbox
Personalizing color schemes is one of the most important things to have in an application. It’s not only used as a way of styling to personal preference, it’s also very important for accessibility.
CodeSandbox didn’t have any way to personalize colors in the editor since release, but I’m happy to announce that we do now. The best part is that we were able to reuse a big chunk of logic from VSCode directly and thus we support any VSCode theme natively in CodeSandbox!
I will first highlight our pre-installed themes and fonts, then explain how to install your custom VSCode theme and I will end with an explanation on how it works (spoiler alert: WebAssembly).
Pre-installed Themes & Fonts
We have made a selection of VSCode themes that we think are important to have ‘pre-installed’. In reality we still download them on-demand, but you can easily make a selection between these themes without opening VSCode. If you have a suggestion for a pre-installed theme don’t hesitate to open an issue!
CodeSandbox (new syntax highlighting)
Night Owl by Sarah Drasner
Atom One Dark by Mahmoud Ali
Atom One Light by Mahmoud Ali
VSCode Light by Microsoft
Dank Mono (font) by Phil Plückthun
We now also enable Dank Mono as pre-installed font by default. This is an incredible font created by Phil Plückthun. It supports italics and font ligatures (you can enable those in preferences). He explains here what the design choices behind Dank Mono are.
You can choose between the fonts ‘Dank Mono’, ‘Menlo’ and ‘Source Code Pro’. You also have the option to install any font that you have locally installed.
Installing a Custom Theme
There are a few simple steps to move your own VSCode theme to CodeSandbox explained here:
- Open VSCode
- Press (CMD/CTRL) + Shift + P
- Enter ‘Developer: Generate Color Theme From Current Settings’
- Copy the contents
- Paste them in CodeSandbox Preferences
Here’s a GIF of copying over a theme:
How It Works
CodeSandbox has been using Monaco as its main code editor for almost a year now. Monaco is the core editor part (the part where you write code in) of VSCode, and the team behind VSCode was so awesome to make this part work in the browser directly as well.
However, the syntax highlighting of VSCode uses .tmLanguage (from TextMate) to tokenize all the code. And parsing .tmLanguage requires a C library called Oniguruma to parse and execute the regular expressions, which has a specific syntax. That’s why the VSCode team put in a different tokenizer into the browser version called Monarch. This tokenizer is not fully compatible with VSCode themes, which made it hard to directly port them over.
However, a year passed by and WebAssembly is gaining a lot of traction. We found out that a library called Onigasm (get it, OnigurumaASM?!) was released, this is a compiled WebAssembly version of Oniguruma with 1:1 support. Quickly after that I found out that the same author(!), NeekSandhu, also published monaco-editor-textmate, which allows you to tokenize .tmLanguage files for Monaco!
This was enough information to make VSCode themes be supported directly in the CodeSandbox editor through the tmLanguage tokenizer. The only thing we had to add was a mapping of the rest of the UI to the VSCode colors. We are using styled-components for styling, so that was a matter of putting the VSCode styles in the ThemeProvider and changing the style of all elements one by one.
Other Features
We also updated our Monaco editor to the latest version (we were on v8, which is a year old). Because of that we now get proper keyboard support for iPads in the editor. I also rewrote the logic in the editor itself, which now gives:
- More robust CodeSandbox Live, there should be less bugs
- More performance in the editor itself and when switching files (I used the trick described here)
- Autocompletion for import statements (I learned about that here)
- Less bugs when switching files
Thanks
I want to give a huge thanks to Sara Vieira, she came with the idea to do this when we were on our way to Brighton and she helped tremendously in building and debugging this functionality. 10 👍 for her!