Skip to main content

Theming

Customize board appearance with CSS custom properties.

Theme the board with CSS variables. Keep semantic state, such as node color presets, in engine state.

Change the CSS custom properties and the board updates immediately.

Core tokens

TokenDefaultPurpose
--board-bg#fbfbfdPage and panel background token used by the board UI.
--board-canvas-bg#f5f6faCanvas background behind nodes and overlays.
--board-fg#14161fText, grid contrast, and general foreground color.
--board-node-bg#fffDefault node surface.
--board-node-border#e4e5eeDefault node border color.
--board-accent#6366e8Selection accents and snap guides.
--board-node-colorunsetResolved border color for a colored node, usually set by the renderer from node.color.
--board-node-tintunsetSubtle surface tint for colored cards and groups.
--board-node-color-ringunsetSelection outline color for a colored node.
--board-snap-guide-colorrgba(99, 102, 232, 0.95)Snap guide line color.

Light and dark examples

css
.board-root {
  --board-bg: #f8fafc;
  --board-fg: #0f172a;
  --board-node-bg: #ffffff;
  --board-node-border: rgba(15, 23, 42, 0.14);
  --board-accent: #0ea5e9;
}

Node colors

Node colors are stored on node.color as preset IDs or six-digit hex colors:

ts
engine.updateNode(card.id, { color: '5' })
engine.updateNode(card.id, { color: undefined })

The built-in renderer resolves those colors into --board-node-color, --board-node-tint, --board-node-color-soft, and --board-node-color-ring. Use those variables in custom renderers instead of reading preset IDs directly in CSS.

css
.task-card {
  border-color: var(--board-node-color, var(--board-node-border));
  background: var(--board-node-tint, var(--board-node-bg));
}

The selection toolbar can batch-apply the same preset to selected cards and groups.

Implementation detail

Styling specific states

css
.board-node.is-selected {
  outline: calc(3px / var(--board-zoom, 1)) solid var(--board-accent);
}

.board-node.is-locked {
  opacity: 0.72;
}

.board-node.is-group {
  background: var(--board-node-tint, var(--board-group-bg));
}

Use state classes when you want a special selected, locked, or group look without replacing the full renderer.