MAKE IT
YOURS!

You stare at this editor all day. It should look the way you like. Switch to a comic theme, pick an accent, or open the theme editor and change every colour, radius, shadow and font, live, while you work.

TRY IT FREE →

Switch the app’s theme0:05

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.

SWISH!

THE PROBLEM

Every design tool wears the same grey suit

Grey panels. Grey borders. A blue you didn't choose. Want something else? Hope for a dark mode toggle, or install a browser extension that fights the app's class names and loses every release.

PopCraft treats its own look as a design problem. The interface is drawn from tokens, named values like panel.bg and accent. A theme is a small JSON file that sets some of them. The editor that changes them is built in. The selectors theme CSS targets are a promised interface, not an accident of markup. And themes travel as plugins, so you can share them.

built-in themes

accent colours, plus System

tokens across seven groups

effect on your designs

ONE CLICK

Comic Black: ink, halftone, Bangers

Press ⌘,, pick a theme under Theme, done. Comic Black turns the panels black with yellow ink, gives section titles Bangers lettering, and dresses the toolbar and canvas chrome to match.

The choice is saved on this device and works offline. It is also in the ⋯ menu in the top bar, as Theme: …, for when Settings is one click too far.

Put the whole editor in Comic Black0:09

A landing page open in the editor. Command-comma opens Settings and Comic Black is picked under Theme: panels go black with yellow ink, headings turn to Bangers, and the toolbar and canvas chrome follow. Settings is closed and a section is selected, showing the comic selection colours.

THE OTHER ONE

Comic Yellow, around a comic page

Yellow panels, black outlines, hard offset shadows and halftone dots. It is the look of this website, wrapped round your work. Here it frames the six-panel comic page template, and the art in the middle doesn't move a pixel.

Both comic themes extend a hidden base, popcraft.comic-base, that holds their shared shape, fonts and CSS. Extend either one and you get a comic variant of your own for the price of a few colours.

Comic Yellow, on a comic page0:09

The classic comic page template in the editor. Command-comma opens Settings and Comic Yellow is picked under Theme: the panels turn yellow with black ink outlines, hard offset shadows and Bangers section titles around the comic page. PopCraft Dark brings the default back.

SMALLER MOVE

Seven accents, or your Mac's

Not ready for a whole theme? Settings → Accent recolours PopCraft Dark: Lavender (the default in a browser), Peach, Sky, Magenta, Teal, Gold or Coral. The accent paints buttons, the focus ring, the active tool and the selection outline on the canvas.

System follows your computer's accent. It is the default in the desktop app on a Mac and follows a change in System Settings straight away. If an accent would be hard to see on dark panels, PopCraft lightens it just enough to stay readable.

Change the accent colour of PopCraft Dark0:08

A launch post in the editor with its badge selected. Command-comma opens Settings; under Accent, Peach, Teal and Coral are clicked in turn and the buttons, the focus ring and the selection outline on the canvas follow each one. Lavender brings back the default.

THE THEME EDITOR

Every token, live, beside the canvas

Settings… → Edit theme… docks the editor next to your work. The Tokens tab lists every token in groups: Surfaces, Text, Accents, Shape, Typography, Decoration and Canvas. Search by name or by what it does.

Each kind of value gets a real control: a colour picker for colours, a shadow builder for shadows, a font list, a number field that knows its unit, a switch. Each also has a raw text fallback, for when you know exactly what you want. Edited tokens get a dot; hover and hit ↺ to reset one. ⌘Z undoes inside the editor.

Open the theme editor and find a token0:05

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 PALETTE

Seven groups, one for every surface

SURFACES

app.bg · panel.bg · overlay

TEXT

fg · fg.muted · fg.onAccent

ACCENTS

accent · ai · danger

SHAPE

radius.md · shadow.popover

TYPOGRAPHY

font.ui · heading.stroke

DECORATION

panel.pattern · tilt.popover

CANVAS

canvas.selection · canvas.cursor.fill

Each token is also a CSS variable: accent is var(--pc-accent). The Canvas group is the odd one out. It colours chrome the GPU draws, like selection outlines, rulers, snap lines and cursors, so its colours must be #hex, rgb() or rgba(). Everything else takes any CSS colour, including oklch().

WHERE DID THAT COLOUR COME FROM

Point at it, get its tokens

The crosshair: click anything, see what colours it0:05

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.

Change app.bg and the window behind every panel follows0:05

A copy of PopCraft Dark open in the theme editor. The app.bg token, the window behind every panel, is changed from near-black to a deep blue, and the canvas surround and gaps between panels change with it.

The hardest part of theming anything is finding the variable. The crosshair next to the search fixes that: click it, click a toolbar button, and the list narrows to the tokens that button uses, plus the surface it sits on. Hooked elements carry a data-pc-tokens list, which is how the picker knows.

HOW A THEME RESOLVES

Four layers, top one wins

4Unsaved edits in the theme editor

What you are trying right now. Discard drops them.

3The theme's own tokens

Only the ones it sets. A small theme can be five lines.

2Each theme it extends, oldest first

"extends": "popcraft.comic-yellow" and you inherit the whole comic look.

1PopCraft Dark's defaults

The floor. Anything nobody set comes from here.

The top wins. Each layer only says what it changes.

X-RAY

A theme is one small file

This is the whole format, straight from the docs. The editor writes it for you, but nothing stops you writing it by hand or generating a hundred of them.

midnight.popcraft-theme.json

{
"id": "acme.themes.midnight",Letters, digits, dots. A plugin's themes start with the plugin id.
"name": "Midnight",What the theme menu says.
"type": "dark",dark or light: lands on <html> as data-theme-type.
"extends": "popcraft.dark",Inherit everything you don't set.
"tokens": {
"accent": "#7c5cff",Also fills in accent.hover and focusRing for you.
"panel.bg": "#15151f",Also fills in the surface and border ramps.
"canvas.selection": "#7c5cff"Drawn on the GPU: hex or rgb() only.
},
"css": "[data-pc=\"section-title\"] { … }"Extra CSS, inside @layer pc-theme. Offline only.
}

Unknown tokens are ignored, so a theme keeps working if a token is renamed. Values can't contain ;, {, }, < or >: no sneaking code in through a colour.

CSS HOOKS

When tokens aren't enough

Pill buttons that press down. Halftone dots on the side panels. Uppercase section titles. That is CSS, and the CSS tab takes it. It is added after PopCraft's own styles, inside @layer pc-theme, so it wins without a pile of !important.

Target data-pc hooks, not class names: [data-pc="tool"], [data-pc="panel"], [data-pc="dialog"] and about forty more, with state attributes like data-active and aria-selected. Hooks are a promise: one only gets renamed or removed with a changelog note. Class names promise nothing.

Restyle the toolbar with a CSS hook0:07

A copy of PopCraft Dark in the theme editor. On the CSS tab a rule is typed for the [data-pc="tool"] hook — round tool buttons with an outline — and the toolbar under the canvas changes as it is typed.

THE RULES

What theme CSS can and can't do

YOU CAN	YOU CAN'T
Restyle any data-pc hook, using var(--pc-*) so it follows token edits	Rely on Tailwind classes or DOM structure staying put
Draw decoration with ::before, colour it with tokens	Give topbar or panel a z-index, transform or isolation (it traps their menus)
Use images as data: URLs	Load anything from the network: other url() values become none
Put halftone dots under your artwork with canvas.backdrop tokens	Draw behind the canvas with CSS: the GPU canvas would be covered
Style the desktop app's tab strip with desktop-* hooks	Use web fonts in that strip: it gets token variables only

FONTS

Bring your own lettering

A theme can carry its fonts, so it looks the same on every machine and offline. Fonts → Add font…turns a .woff2, .woff, .ttf or .otf into a base64 entry inside the theme, up to 2 MB a font, with variable weight ranges like "100 900". Then point font.ui or font.heading at it.

Bangers and Nunito are always there, as var(--font-bangers) and var(--font-nunito). Add heading.stroke for outlined comic titles and textTransform.heading for shouting.

FROM ZERO

Your theme in six moves

Open the theme editor
Settings… → Edit theme…, or ⌘K and Edit theme. It docks beside the canvas, so you keep working while you tweak.
Duplicate or Save as…
Built-in themes are read-only. Save as… makes yours and extends the original. Duplicate flattens every value into a standalone copy.
Change tokens
Colour pickers, a shadow builder, a font list, number fields with units, switches. Every change lands on the whole app at once, canvas chrome included.
Pick an element
Click the crosshair, then anything in the interface. The list narrows to the tokens that element uses, and the surface it sits on.
Reach further with CSS
The CSS tab targets data-pc hooks and var(--pc-*) tokens. Apply CSS to try it, Save to keep it.
Ship it
Export a .popcraft-theme.json, or click Plugin for an installable theme pack you can publish to the marketplace.

Duplicate PopCraft Dark, change the accent0:06

The theme editor on the built-in PopCraft Dark, which is read-only. Duplicate makes an editable copy named Pop Sunset. Its accent token is changed to an orange, and every accent in the app — the selected tool, buttons, the selection — turns orange at once.

Plugin: the theme as an installable pack0:03

A theme of your own open in the theme editor. Plugin downloads it as a plugin package — a data-only theme pack — and the editor says to install it or publish it from Manage plugins.

SHARE IT

Themes travel as plugins

DATA ONLY

A theme plugin has no main script, asks for no permissions and never runs code. A manifest and some JSON.

MANY PER PACK

One plugin can hold a dark and a light theme. Each id starts with the plugin id, so packs never collide.

ON THE MARKET

Publish like any plugin, from the plugin manager or from CI with GitHub Actions. Theme-only plugins ask for nothing.

Install a pack with ⋯ → Manage plugins… → Install from file; its themes are in the menu at once. Remove it and they go, and if one was active you land back on PopCraft Dark. The Comic Noir example is a complete semi-dark pack to copy.

DESKTOP

Themes as plain files

In the desktop app, themes can live in the app's themes/ folder (on macOS, ~/Library/Application Support/com.popcraft.desktop/themes/). Any .json theme there shows up in the menu marked local file, and edits show up as soon as the file is saved. A theme loaded from a file saves straight back to it.

Which means: keep your theme in git, edit it in your text editor with PopCraft open beside it, and watch the app follow. Save a copy to the themes folder puts any theme there.

THE FINE PRINT

Your chrome. Not your art.

Built-in and plugin themes are read-only: save a copy to change one. Closing the editor drops unsaved edits. The Comic themes, and any theme with its own accent, hide the accent row. Everything else is in the token reference and the list of hooks.

ASKED & ANSWERED

Questions, answered

Does a theme change my designs?

No. Themes change how PopCraft itself looks: panels, menus, inputs, fonts, and the selection handles and rulers on the canvas. Your artwork, exports and published sites are untouched.

Which themes come with PopCraft?

Three: PopCraft Dark (the default), Comic Yellow (yellow panels, black ink outlines, hard shadows, halftone dots, Bangers headings) and Comic Black (the same, inverted). Switch in Settings or from the ⋯ menu.

Can I just change the accent colour?

Yes. Settings → Accent offers Lavender, Peach, Sky, Magenta, Teal, Gold, Coral, or System to follow your computer. It applies to PopCraft Dark and themes built on it that leave the accent alone; the Comic themes keep their own.

Can theme CSS load a web font or an image from a URL?

No. @import and url() values other than data: URIs are removed, so themes never reach the network. Bundle fonts into the theme instead: Fonts → Add font… takes a .woff2, .woff, .ttf or .otf, up to 2 MB each.

Can I draw a pattern behind my artwork?

Not with CSS: the canvas is drawn on the GPU and CSS over it would cover your work. The canvas.backdrop.dots and canvas.backdrop.dotsAlt tokens draw halftone dots under all content instead.

Will my CSS break in the next release?

Target data-pc hooks, not Tailwind classes or DOM structure. Class names and markup can change in any release; a hook is only renamed or removed with a note in the changelog.

Is a theme plugin safe to install?

A theme-only plugin is data: no main script, no permissions, no code run. A plugin can also carry themes alongside code, and then asks for whatever its code needs, like any plugin.

THE MANUAL, FOR THE DETAILS

KEEP EXPLORING

Goes great with

KLIK!

TEAM & CODE

Plugins & Marketplace

Plugins, widgets, themes, templates, brushes and shaders, from you or the community.

SNAP!

DESIGN & PROTOTYPE

Design

Auto layout, components, variants and styles that keep up.

DING!