Theme editor

Open Settings… → Edit theme… (next to the theme picker, in a file) to dock the theme editor beside the canvas. Every change applies instantly, canvas chrome included, so you can adjust a theme while you work.

Editing tokens

Open the theme editor and find a token · 0:05
Description

The editor with a launch post. ⌘K runs Edit theme…, which docks the theme editor beside the canvas with the Tokens tab: every token, grouped. “accent” is typed in its search and the list narrows to the accent colours.

The Tokens tab lists every token, grouped as Surfaces, Text, Accents, Shape, Typography, Decoration and Canvas.

  • Change a value: click a color swatch to open the color picker, or type any CSS value into the field and press Enter. Shadows, fonts, lengths and switches get their own controls (a shadow builder, a font list, a number field with its unit, a switch), each with a raw-text fallback. Colors can be #hex, rgb(), rgba() or oklch(). Canvas tokens must be hex or rgb.
  • Find a token: search by name or description.
  • See what's changed: edited tokens are highlighted with a dot. Hover one and click ↺ to reset it to the value the theme inherits.
  • Undo and redo: use the arrows in the header, or ⌘Z / ⇧⌘Z while the editor has focus.

Fonts

Add font… bundles a font file into your theme; see Creating a theme. Built-in and plugin themes need to be saved as your own copy first.

Pick an element

Pick an element to see its tokens · 0:05
Description

The theme editor is open. The crosshair next to the search is clicked, then the toolbar’s frame tool: the list narrows to the tokens that tool uses, and the surface it sits on. Show all goes back to every token.

Click the crosshair next to the search field, then click anything in the interface. The list narrows to the tokens that element uses, including the surface it sits on. Click Show all to go back.

Saving

Built-in themes and themes installed by plugins are read-only.

  • Save as… creates your own theme from the edits. It extends the original, so it keeps picking up changes to anything you didn't edit.
  • Save writes into a theme you own.
  • Duplicate makes a standalone copy with every value flattened in, so it doesn't depend on the original.
  • Discard drops unsaved edits.

Closing the editor also discards unsaved edits.

Desktop: themes folder

In the desktop app, themes can live as plain files in the app's themes/ folder (on macOS, ~/Library/Application Support/com.popcraft.desktop/themes/):

  • Loading: any .json theme file there appears in the theme menus, marked local file. Edits to the file show up as soon as it's saved.
  • Saving: a theme loaded from a file saves straight back to that file. Save a copy to the themes folder writes any theme there, so you can keep it in version control or share it.
  • Opening: Open the themes folder shows it in Finder or Explorer.

Custom CSS

The CSS tab edits extra CSS for your own themes. See CSS hooks for what to target. Click Apply CSS to try it, then Save.

Import and export

  • Export (↓) downloads the theme as a .popcraft-theme.json file.
  • Import (↑) loads one as a new theme of your own.
  • Plugin downloads an installable plugin package (.zip) containing the theme. Install it from Manage plugins… or publish it; see Publishing themes.