Derp Swatch

The Derp Swatch is the pack's color tool, and it's charmingly direct: a palette of color swatches you can drag onto other nodes to recolor them. No editing node color through a tiny default palette, no hunting through a theme file - you drag a color and the node turns that color. Part of xcp_derp-UI (search "xcp_derp-UI" in ComfyUI Manager, by lordwedggie), under derpNodes/ControlDeck.

What it does

The node has no sockets - no inputs, no outputs - and its Python side is a do_nothing shell. All the work is frontend, and it targets a problem the default UI only half-solves: stock ComfyUI lets you change a node's color from a tiny selection, while derp-UI's whole pitch is proper theming. The Swatch is the fast path to that. It maintains palettes (entries with names and colors), and when you drag a swatch onto a target node, the frontend applies it as header and body colors - setting CSS variables like --node-color and --component-node-background, and painting the node's header and body directly.

The interesting part is that it's not limited to derp nodes: the JS is explicitly built to apply swatch colors onto standard ComfyUI nodes - that's the "minimal Fatha utility node for dragging palette swatches onto standard ComfyUI nodes" in the source's own words. So it's a theming bridge between the derp world and the default one.

How it works

Under the hood, swatches are stored per node as palettes (_derpSwatchPalettes on the node), and the swatch regions are keyed as swatchColor_<index>. Dragging a swatch onto a target resolves the drop position to a node via the graph, reads the swatch color, and applies it live - you see the recolor as soon as you drop. The colors are cloned from the palette entry (with a sensible fallback to [0,0,0,1] black for broken entries), so a bad palette entry degrades to black rather than crashing the render. The swatch node also syncs its own theme to match whatever palette is active, so the picker itself stays visually consistent with what you're doing.

Why this exists

The KB's ui-history.md tells the story of ComfyUI's interface evolving from utilitarian canvas to something people actually skin - and derp-UI sits firmly on the "let me make this mine" side of that line. The Swatch is the lowest-friction tool for it: no theme files, no CSS knowledge, just drag and drop. It's the same spirit as the Theme Extender that lets you assign a derp theme to a default node via right-click in the Nodes 2.0 frontend.

Install

cd ComfyUI/custom_nodes
git clone https://github.com/lordwedggie/xcp_derp-UI-Release

Restart ComfyUI. No pip requirements, no model downloads, no npm step. Manager users: search xcp_derp-UI.

Honest takes

This is a small, focused node with a small, focused job: coloring things. It's a genuinely handy quality-of-life addition if you color-code your workflows (red for inputs, green for outputs, whatever your system is), and the drag-to-apply works on default nodes, which is the part most theming tools skip. The caveats are the pack's usual ones - young project, no third-party docs, bundled docs and changelog as the reference - plus one specific expectation check: swatches color nodes, they don't save themes. For persistent theme work you want the Derp Theme Manager V2. This is the quick coat of paint; that's the full renovation.