JSLab feature notes: one docs page, explained. Today: Themes and appearance.

You stare at an editor all day. It should look the way you like. JSLab, a JavaScript & TypeScript scratchpad for macOS, gives you three ways to get there.

21 built-in themes

JSLab ships Graphite, its dark native theme and the default, and Graphite Light. Nineteen more are built in:

  • Dark: Dracula, One Dark, Monokai, Material Darker, Ayu Dark, Ayu Mirage, SynthWave '84, Shades of Purple, Nord, Night Owl, Catppuccin Mocha, GitHub Dark, Solarized Dark and Tomorrow Night.
  • Light: GitHub Light, Solarized Light, Catppuccin Latte, Ayu Light and Visual Studio Light.

Every built-in theme meets WCAG AA contrast on its text and background pairs.

The quickest way to choose: open the command palette (⇧⌘P), type "Theme" and arrow through the list. Each theme applies as you move, ↩ keeps it, Esc puts the old one back.

JSLab in the Graphite Light theme: a TypeScript tab called Order totals by region, with an Order interface and typed orders, and the output pane showing 3, Object {…}, Revenue: 375.5 and Top region: APAC, each tagged with its line.

Follow the macOS appearance

Turn on Follow System Appearance (Settings → Appearance, or the Themes menu) and JSLab switches with macOS between two themes you pick: Light Theme (Graphite Light by default) and Dark Theme (Graphite by default).

Import a VS Code theme

Already have a theme you love? Choose Themes → Import VS Code Theme… (or run it from the palette) and pick a .json theme file or a .vsix extension package. If a .vsix holds several themes, JSLab asks which one.

What happens on import:

  • The theme's TextMate scopes are mapped onto the editor, and the window's own colours are derived from the theme.
  • Where the original would leave a surface hard to read, JSLab raises the contrast.
  • The theme is saved in the themes/ folder of JSLab's data folder and appears straight away in the Themes menu, the palette and the Theme picker.

Two limits, straight from the docs: a theme can't reuse a built-in theme's name (rename it and import again), and semantic token colours aren't supported, so some code may look plainer than in VS Code. JSLab tells you when a theme uses them.

Fonts while you're there

Settings → Appearance also sets the font. Six coding fonts are bundled (JetBrains Mono, the default, Fira Code, DejaVu Sans Mono, Hack, Ubuntu Mono and Source Code Pro), followed by the fonts installed on your Mac. Ligatures are on by default.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/themes