Themes

Customise Fabric Agents' visual appearance with a 6-color semantic theme system, preset themes, scenic mode with background images, and per-workspace overrides.

Fabric Agents' appearance is controlled by a single theme.json file. The format is small — six semantic colours, optional surface overrides, optional dark-mode variants, optional background image — so making a theme is fast and predictable.

The six colours

Every theme must define six semantic roles:

Role	Used for
`background`	The app's canvas — blank space, primary surfaces.
`foreground`	Primary text colour.
`accent`	Brand emphasis — Execute mode, primary actions, selected states.
`info`	Warnings, Ask-mode emphasis, informational callouts. Typically amber.
`success`	Positive confirmations. Typically green.
`destructive`	Errors, destructive actions. Typically red.

Any valid CSS colour works: hex, rgb(), hsl(), oklch(), CSS named colours.

Surface overrides (optional)

If you want more control than the six roles give you, override specific surfaces:

Surface	What it affects
`paper`	Assistant message cards, detail panels.
`navigator`	The left sidebar.
`input`	Chat input and form fields.
`popover`	Dropdowns, menus.
`popoverSolid`	Modal dialogs (must be fully opaque for scenic mode to work).

Anything you don't set falls back to background.

Dark mode

Add a dark object with overrides for any of the colours above:

{
  "background": "#ffffff",
  "foreground": "#111111",
  "accent": "#6b4cf5",
  "info":   "#d97706",
  "success": "#15803d",
  "destructive": "#dc2626",
  "dark": {
    "background": "#0a0a0a",
    "foreground": "#f5f5f5",
    "paper": "#141414"
  }
}

Dark mode follows the OS setting by default. You can also toggle it manually from Settings → Appearance → Dark Mode.

Preset themes

Fabric Agents ships preset themes under apps/electron/resources/themes/. On first launch — and every subsequent launch — presets sync to ~/.fabric-agent/themes/:

Missing file → copied from the bundle.
Present but invalid JSON → re-copied from the bundle (auto-heal).
Present and valid → left alone, so your edits survive upgrades.

To install a new preset, drop a .json file into ~/.fabric-agent/themes/ and pick it from Settings → Appearance → Theme.

Where themes apply

Theme resolution order (most specific wins):

Workspace theme — {workspace}/.fabric-agent/color-theme.json, or defaults.colorTheme in {workspace}/config.json.
Global theme override — ~/.fabric-agent/theme.json.
Built-in default — the bundled default preset.

Use a workspace theme when you want different visual cues per project (a red accent for "production incidents", a calm green for "docs"). Use the global override for a machine-wide look.

Scenic mode

Add a mode: "scenic" and a backgroundImage to paint the window with an image and apply glass-panel effects to UI surfaces:

{
  "name": "Fjord",
  "mode": "scenic",
  "backgroundImage": "file:///Users/me/Pictures/fjord.jpg",
  "background": "rgba(12, 20, 30, 0.55)",
  "foreground": "#ffffff",
  "accent": "#8ab9ff",
  "info":   "#f5c56e",
  "success": "#8ee89b",
  "destructive": "#ff8a8a",
  "popoverSolid": "#0b1220"
}

Scenic mode requires popoverSolid to be fully opaque — modals and context menus aren't tinted so they stay legible on top of any background.

Supported image sources: local file:// paths, bundled app:// paths, and https:// URLs. Images are cached locally after first load for offline use.

A minimal custom theme

Here's the smallest valid theme.json — six colours, nothing else:

{
  "background": "#0f172a",
  "foreground": "#e2e8f0",
  "accent": "#38bdf8",
  "info":   "#facc15",
  "success": "#4ade80",
  "destructive": "#f87171"
}

Save it as ~/.fabric-agent/themes/my-theme.json, pick it from Settings. Edit and save — the app hot-reloads the file, so you see changes immediately.

Metadata (optional)

You can also include:

Field	Use
`name`	Display name in the picker.
`description`	One-liner shown below the name.
`author`	Credit line.
`license`	License for the theme.
`source`	URL to the theme's home (git repo, gist, etc.).
`supportedModes`	`["light"]`, `["dark"]`, or `["light", "dark"]`.
`shikiTheme`	Code-block syntax highlighting theme (any Shiki theme name).

These are all optional — a theme with only the six colours works perfectly.

Because themes are self-contained JSON files, the simplest way to share one is to post the file. For community themes, commit them to a repo and let people drop the file into ~/.fabric-agent/themes/. A future release may add a theme gallery; today it's manual and fast.

Permissions — where the accent and info colours show up in mode badges
Workspaces — how per-workspace theme overrides work

On this page