Docs / Settings and looks
Themes and fonts
Three settings make JSpark's look: the App Theme, the Code Theme and the font.
JSpark offers two App Themes, Sunny and Night, two Code Themes, Plain and Moss, and the Fira Code font. It starts in Night with Moss and Fira Code. The other themes and fonts are JSpark+.
App Theme
The App Theme colours the app’s own surfaces, around and behind your code.
- Open Settings → General.
- Click a tile under Theme. The window changes at once.
There are six: Sunny, Calm and Paper are light; Night, Dusk and Slate are dark.
Theme
Button style
For the bar along the bottom and the Timeline. Icons show their names on hover; words spell them out, and fall back to icons where they would not fit.
When a tab you are closing has changes that are not in the Library. A Starter’s demo, or a snippet just as you saved or opened it, closes without asking.
When you go from a light Theme to a dark one, the Code Theme moves to the same place in the dark list. Go back, and you are where you started. In JSpark, when that place needs JSpark+, the Code Theme becomes Plain in light and Moss in dark.
Code Theme
The Code Theme colours your code in the editor and the values in the console. It is chosen apart from the App Theme.
- Open Settings → Editor.
- Click a tile under Code colors.
The list shows the six Code Themes that match the App Theme’s brightness. For a light Theme: Plain, Sepia, Meadow, Frost, Dawn and Mono. For a dark one: Ink, Ember, Moss, Neon, Orchid and Contrast.
Code colors
Font
Fira Code and JetBrains Mono come with the app. Other monospace fonts appear here once installed.
Off: a long line runs on and the editor scrolls sideways. On: it continues on the next row.
Show a list of names as you type. Off, press ⌃Space to ask for it.
Rest the pointer on a name to see its type. Values in the Timeline always show.
Tidy the code when you press Run or open the Timeline. Never while Auto-run runs as you type.
Font and text size
The font is used for code in the editor and in the console. Pick it under Settings → Editor → Font; each tile is drawn in its own face.
- Fira Code and JetBrains Mono come with the app.
- Fira Code + Ligatures joins
=>and!==into single symbols. Fira Code draws each character on its own. - Other monospace fonts appear in the list once they are installed on your computer, such as Cascadia Code, Source Code Pro or IBM Plex Mono.
Settings → Editor → Text size sets how large code is drawn, from 10 to 24 px. The default is 13px. The console uses the same size, unless you move its own slider in Settings → Console → Text size.
More themes and fonts JSpark+
JSpark+ has every App Theme, every Code Theme and every font in the list.
In JSpark, every tile is still shown, so you can see each look. The ones that need JSpark+ wear its mark. Clicking one says what JSpark+ adds, and changes nothing. If the app goes back to JSpark, the look you chose stays as it is. See What JSpark+ adds.
The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.