Themes and appearance

Choose from 21 built-in themes or import a VS Code theme, follow the macOS appearance, and set fonts, zoom and layout.

Built-in themes

Pick one of 21 themes and preview each live from the palette, or follow the macOS appearance.

JSLab ships Graphite, a dark native theme, and Graphite Light. Graphite is the default. 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. All of them are included; there’s no paid tier.

Pick a theme from the Themes menu, the command palette, or Theme in Settings → Appearance. In the palette, type “Theme” and arrow through the list: each theme applies as you move, ↩ keeps it and Esc puts the old one back.

Follow the macOS appearance

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

Import a VS Code theme

Bring in any VS Code theme from a .json or .vsix file and use it like a built-in one.

Choose Themes → Import VS Code Theme…, or run it from the command palette, and pick a .json theme file or a .vsix extension package. If a .vsix holds several themes, JSLab asks which one to import.

JSLab maps the theme’s TextMate scopes onto the editor, and derives the window’s own colors from the theme. Where the original would leave a surface hard to read, it raises the contrast.
Imported themes are saved in the themes/ folder of JSLab’s data folder, and appear straight away in the Themes menu, the command palette and the Theme picker.
A theme can’t reuse a built-in theme’s name. Rename it and import it again.
Semantic token colors aren’t supported, so some code may look plainer than in VS Code. JSLab tells you when a theme uses them.

Fonts

Settings → Appearance sets the font for the editor and the output:

Font lists six bundled coding fonts first, JetBrains Mono, Fira Code, DejaVu Sans Mono, Hack, Ubuntu Mono and Source Code Pro, then the fonts installed on your Mac. JetBrains Mono is the default.
Font Size is 14 by default, from 8 to 72.
Font Ligatures combines pairs like => into one glyph when the font supports it. It’s on by default.

Zoom

⌘= zooms in, ⌘- zooms out and ⌘0 returns to actual size. Zoom scales the editor, the output and the side bar together. The same value is Zoom in Settings → Appearance, from 0.5 to 2.

Layout

Put the output beside the editor or below it, and resize every pane by dragging.

Show or hide each part of the window from the View menu, the command palette or Settings → Appearance:

Tab Bar: shown even when only one tab is open. On by default.
Activity Bar: the strip of panel buttons on the left. On by default.
Status Bar: the bar along the bottom. On by default.
Side Bar: the panel for Snippets, AI Chat, Learning & Tips and the transpiled output. Off by default. See Panels and the side bar.
Output: View → Output hides or shows the output panel for the current tab.

The editor and output sit side by side or stacked. Switch with ⌥⌘\ (Toggle Vertical Split), the split button in the status bar, or View → Layout. Layout in Settings → Appearance sets the direction for new tabs.

⌃⌘F enters full screen. Menus, hovers and dialogs never hide behind the Web View: it gets out of their way while they’re open.

Show or hide the activity bar, side bar, status bar and tab bar, and resize the side bar by dragging.

The activity bar on the left opens Snippets, NPM Packages…, AI Chat and Learning & Tips, with Run and Settings at its ends. The side bar shows one panel at a time; clicking a panel’s button again closes it. Drag the side bar’s right edge to resize it (240 to 600 points), or press the arrow keys on the edge; double-click it to reset. The width is Side Bar Width in Settings → Appearance.

The status bar carries the run state, the runtime, language and framework menus, the layout, Web View and Tailwind switches, and the working directory. ⌃⌘F enters full screen, and double-clicking the title row zooms the window. The menus are built from the same commands as the palette, so their shortcuts follow your keybindings.

Language of the interface

Language in Settings → General changes the language of menus and panels. JSLab has to restart to apply it, and tells you so. See Translating JSLab.