CSS hooks

Theme CSS should target these data-pc attributes, not Tailwind classes or DOM structure. The attributes are a stable interface. Class names and markup can change in any release; a data-pc hook is only renamed or removed with a note in the changelog.

Most hooked elements also carry data-pc-tokens, a space-separated list of the token ids their default styling uses (for example data-pc-tokens="overlay border.strong fg.dim shadow.popover" on a menu). It is informational: the Theme Editor's element picker reads it to jump from a clicked element to the tokens that color it. Don't style against it; target data-pc instead.

On <html>:

• data-theme is the active theme id.
• data-theme-type is dark or light.

Desktop tab strip

In the desktop app the tab strip is its own page. The editor sends it the same stylesheet it applies (token variables and theme CSS), so desktop-* hooks style it like any other element. Only token variables, not web fonts, are available there.

Canvas background

The canvas is drawn on the GPU, so theme CSS can't put anything behind your artwork (CSS over the canvas would cover it). Use the canvas.backdrop.dots and canvas.backdrop.dotsAlt tokens for a halftone backdrop drawn under all content; see the token reference.

Decorating containers

topbar and panel hold dropdown menus that are positioned inline. Don't give them isolation, z-index, transform, rotate or scale — each of those creates a stacking context that traps the menus underneath the neighbouring panels. To draw decoration behind their content, use a single ::before and lift the children above it, the way the built-in comic themes do:

[data-pc="panel"] > :not([class*="absolute"]) { position: relative; }
[data-pc="panel"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--pc-decor-pop1) 2px, transparent 2.6px);
  background-size: 12px 12px;
  mask-image: linear-gradient(to bottom, #000, transparent 50%);
}

Images in theme CSS must be data: URLs (quoted or not); anything else is replaced with none. SVG masks colored by background: var(--pc-…) are a handy way to draw token-colored shapes such as starbursts.

Example

/* Pill buttons with a hard shadow that press down */
[data-pc="button"] {
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--pc-border);
}
[data-pc="button"]:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
 
/* Halftone dots on the side panels */
[data-pc="panel"] {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.5px, transparent 2px);
  background-size: 10px 10px;
}
 
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-pc="button"]:active { transform: none; }
}