UI Themes

Themes change how PopCraft itself looks: panels, menus, inputs, fonts, and the selection handles and rulers on the canvas. They never change your designs.

PopCraft ships with three themes:

ThemeLook
PopCraft DarkThe default dark interface.
Comic YellowYellow panels, black ink outlines, hard offset shadows, halftone dots and Bangers headings.
Comic BlackThe same comic styling inverted: black panels with yellow ink.

Switch themes in Settings (⌘, or Ctrl+,), or from the ⋯ menu in the top bar (Theme: …). Your choice is saved on this device and works offline.

Switch the app’s theme · 0:05
Description

The editor with a launch post open. Command-comma opens Settings; under Theme, Comic Yellow is picked and the whole app — panels, toolbar and canvas chrome — turns yellow and black. PopCraft Dark brings it back.

  1. Press ⌘, (Ctrl+,) for Settings.
  2. Pick a theme under Theme.

Accent colour

PopCraft Dark, and your own themes built on it, can wear a different accent: Settings → Accent. Pick Lavender (the default in a browser), Peach, Sky, Magenta, Teal, Gold or Coral, or System to follow your computer's accent colour. System is the default in the desktop app on a Mac, and it follows a change in System Settings straight away. The accent colours buttons, the focus ring, the active tool and the selection outline on the canvas. When an accent would be hard to see on the dark panels, PopCraft lightens it just enough to stay readable. In a browser, System paints buttons and the focus ring with the browser's own accent colour and the text colour it pairs with it; the canvas uses the same colour, lightened when needed. Safari and Chrome share only a standard blue with web pages, whatever your Mac's accent is (Firefox shares the real one), so checkboxes, radio buttons and sliders switch to the browser's own controls, which Safari and Firefox draw in your system accent. For your accent everywhere, use the desktop app.

The Comic themes, and any theme that sets its own accent token, keep their own colour, so the row is hidden for them.

Guides

GuideWhat it covers
Theme editorEdit a theme live inside the editor, pick elements to find their tokens, save and export
Token referenceEvery token, its CSS variable and default value
Creating a themeThe theme file format, inheritance and custom CSS
CSS hooksThe stable data-pc attributes theme CSS can target
Publishing themesPackaging themes as a plugin and sharing them on the marketplace