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:
| Theme | Look |
|---|---|
| PopCraft Dark | The default dark interface. |
| Comic Yellow | Yellow panels, black ink outlines, hard offset shadows, halftone dots and Bangers headings. |
| Comic Black | The 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.
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.
- Press ⌘, (Ctrl+,) for Settings.
- 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
| Guide | What it covers |
|---|---|
| Theme editor | Edit a theme live inside the editor, pick elements to find their tokens, save and export |
| Token reference | Every token, its CSS variable and default value |
| Creating a theme | The theme file format, inheritance and custom CSS |
| CSS hooks | The stable data-pc attributes theme CSS can target |
| Publishing themes | Packaging themes as a plugin and sharing them on the marketplace |