Colors

The EntityColor system Fabric Agents uses for labels, statuses, and views — system colours that follow the theme, or fully custom colours with dark-mode overrides.

Fabric Agents has two distinct colour systems:

Theme colours — app-wide. Six roles (background, foreground, accent, info, success, destructive) plus optional surface overrides. These define the whole UI palette. See Themes.
EntityColor — per-entity. Each label, status, or view can carry its own colour, independent of the theme. That's what this page covers.

EntityColor lets you tag a "priority" label in red, an "in-progress" status in green, and a "research" view in purple — without touching your theme.

Two modes

An EntityColor is either a system colour or a custom colour:

System colour

A name that points at one of the theme's semantic roles. When the theme changes (light / dark, or a different preset), system colours follow automatically. No manual upkeep.

Available system colour names:

Name	Role
`accent`	Brand emphasis. In the default theme, a purple.
`info`	Informational. Usually amber.
`success`	Positive. Usually green.
`destructive`	Warnings / danger. Usually red.
`foreground`	Plain text colour.

System colours also support opacity modifiers using a / suffix — foreground/50 means 50% of foreground, foreground/80 is 80%:

{ "color": "foreground/60" }

Custom colour

A specific CSS colour value, optionally with a dark-mode variant:

{
  "color": {
    "light": "#3b82f6",
    "dark":  "#60a5fa"
  }
}

If you only provide light, Fabric Agents auto-derives a dark-mode value by brightening the light colour ~30%. That's usually "close enough" for hex; for full control, supply both.

Custom colours accept any CSS format the browser does:

Hex — #3b82f6, #3b82f6cc (with alpha)
OKLCH — oklch(0.7 0.15 270)
RGB / RGBA — rgb(59 130 246), rgba(59, 130, 246, 0.8)
HSL / HSLA

What uses EntityColor

Entity	Where the colour shows up
Statuses	The status badge in session rows, session viewer header, kanban/state views.
Labels	Coloured circles next to the label name. Filter chips in the sidebar.
Views (smart labels, saved filters)	Badge background behind the view name in the sidebar.
Source brands	Brand-coloured accents on source cards and chat headers.

Agents, skills, and commands don't carry EntityColor — they use icons and plain text.

Defaults

Built-in entities ship with sensible system-colour defaults:

Entity	Default colour
Status `in-progress`	`success` (green — active work)
Status `needs-review`	`info` (amber — attention needed)
Status `done`	`accent` (the brand colour — finished)
Status `cancelled`	`foreground/50` (muted, de-emphasised)
Status `todo`	unspecified — uses the neutral foreground.

These are all system colours so they stay in sync with your theme. Override them any time by editing the status in Settings, or by editing {workspace}/statuses/config.json directly.

Where colours are stored

Entity	File
Statuses	`{workspace}/statuses/config.json` → `status[].color`
Labels	`{workspace}/labels/config.json` → `label[].color`
Views	`{workspace}/views.json` → `view[].color`
Source brands	source's own `config.json` → `brand.color`

Every color field is optional — entities without one render in a neutral colour.

Dark mode

System colours just work. They reference CSS variables that already have light / dark variants from the theme.
Custom colours with a dark variant use that exact value in dark mode.
Custom colours without a dark variant auto-derive: hex colours get lightened ~30%, other formats stay the same. Supply a dark value for anything load-bearing.

EntityColor resolves to an inline style attribute at render time, not a Tailwind class. That means custom hex codes from entity config work without a build step or class allowlist — you can add an arbitrary colour to a label and it'll render correctly on first refresh.

Example

A full label with a custom colour:

{
  "id": "priority-urgent",
  "name": "Urgent",
  "color": { "light": "#dc2626", "dark": "#f87171" },
  "valueType": "string",
  "autoRules": [
    { "pattern": "\\b(urgent|critical|p0)\\b", "flags": "i", "description": "Urgent keywords" }
  ]
}

A view using a system colour:

{
  "id": "waiting-on-me",
  "name": "Waiting on me",
  "color": "info",
  "filter": { "status": "needs-review", "assignee": "me" }
}

Themes — the app-wide palette that system colours reference.
Labels — hierarchy, auto-rules, typed values.
Statuses — workflow states and their colours.
Icons — the icon side of entity customisation.