---
title: Workspace icon color
---

# Workspace icon color

## What it is

Each self-serve Team Chat workspace tile in the switcher rail can be given a custom gradient color so you can tell your workspaces apart at a glance. The company workspace (the building glyph) is not customizable — it always uses the standard icon.

Colors are stored locally on each device (localStorage), not synced across devices or users. Eight gradient options are available: green, blue, red, purple, orange, pink, slate, and teal.

## Where to find it

It lives in the workspace switcher rail — the vertical column of tiles on the far left of **Team Chat**. Right-click a self-serve workspace tile there (or long-press on mobile) and a colour picker opens; the same menu's **Remove color** entry clears it again.

## How it behaves

### How to use it

1. Open **Team Chat** (enable it in Settings > Lab if you haven't).
2. In the workspace switcher rail (the vertical column of tiles on the far left), **right-click** a self-serve workspace tile (or **long-press** on mobile).
3. A color picker appears with eight gradient swatches. Click one to apply it.
4. To remove a custom color, right-click the tile again and choose **Remove color**.

Your custom color shows on the tile immediately when selected, including on the active workspace. The active tile with a custom color shows the gradient background plus an accent outline ring so you can still tell which workspace is selected.

## For agents

### How it works

- **Palette + persistence:** `src/renderer/src/features/team-chat/workspace-icon-colors.ts` — defines the eight-color gradient palette (with CSS `linear-gradient` values), plus `loadWorkspaceIconColors()` / `saveWorkspaceIconColors()` for localStorage round-tripping (key: `amc:workspace-icon-colors`, validated on load).
- **Rail rendering:** `src/renderer/src/features/team-chat/WorkspaceSwitcherRail.tsx` — tiles without a custom color or icon get a `ring-1 ring-surface-300` outline for visual affordance; tiles with a color render the gradient via inline `background` + white text. The active tile with a custom color shows the gradient plus an accent outline ring; without a color it uses `variant='primary'` (accent fill). Right-click opens a `MenuShell` color picker. The rail is drag-reorderable via `useDragReorder` (pointer-event-based; touch activation via long-press is handled by the hook). The color picker menu has `data-ui-anchor="team-chat-workspace-color-picker"`.
- **State ownership:** `TeamChatSidebarHost` loads colors from localStorage on mount and passes `iconColors` + `onChangeIconColor` to the rail as props.
- **Schema:** the Firestore `chatWorkspaces/{wsId}` doc already has an `iconColor` field (nullable, cosmetic-only) but it is not consumed yet — persisting the color to the server is a follow-on that needs a new `updateChatWorkspace` callable.

## Related

- [team-chat.md](team-chat.md) — the full Team Chat feature page
- [chat-attachments.md](chat-attachments.md) — file uploads in Team Chat