---
title: Your own look — colours, logo, Send icon, robots
nav: Themes
summary: Change the phone page's state colours, message cards, top-left logo, Send icon and the dancing robots (or go back to the dots). One folder, checked by rules before it goes live; the old look sleeps and comes back with one command.
order: 33
---
# Your own look — colours, logo, Send icon, robots

The phone page can look the way you like: other background colours, your own logo at the top left, another icon on
Send, your own dancing robots — or the quiet round dots instead. Agent J ships two looks:

| Look | What it is |
|---|---|
| **robots** (default) | 16 little pixel robots dance at the top right of the reply card, one per Agent working in the background ([the robots](/docs/robots/)) |
| **dots** | the round dots from before: one per Agent, softly blinking, no dancing |

The easiest way is to ask your own Agent J, in plain words: 「把空闲时的绿色换成深蓝色」, "put my company logo at the
top left", "draw me four robots in our brand colours", "go back to the dots". It knows the rules (the built-in
agentj-theme skill), builds the theme, checks it and switches it on. **The phone repaints by itself within a few
seconds — no reload.**

## What you can change

| Part | Where on the phone | Rules |
|---|---|---|
| State colours | the whole chat screen: waiting for you (green), working (blue), needs your approval (orange), needs you to pick an answer (purple), disconnected (grey) | any colour; the white text on it must stay readable (at least 2.5:1), and the five must look clearly different; dark mode deepens them by itself |
| Message cards | the card on top of each page, by who sent it: you, an Agent, typed at the computer, a developer tool, system and scheduled tasks | light colours: the dark text on them needs at least 4.5:1 |
| Logo | top left of the chat page | PNG, square, 128 × 128 or 256 × 256 pixels, at most 64 KiB, a still image; with or without the light round disc behind it |
| Send icon | the glyph on the Send button (the rocket) | PNG with a clear background, 128 × 128 or 256 × 256 pixels, at most 32 KiB; only its shape counts (it is painted white), corners clear, 5–70 % of it covered |
| Robots | top right of the reply card | 1–16 robots of pixel art (rules in [the robots](/docs/robots/#make-your-own)) |
| Dots | the same place, instead of robots | 1–9 colour pairs; each dot blinks between its two colours |

Menu colours (`colors.menu`): the menu pages — Settings, All commands, Keyboard shortcuts — are dark by default (Noir page and header, Sooty panels, Lotion text, Milky Waves accent). A theme can set `background`, `panel`, `text` (text and icons), `accent` (switches that are on, the selected section, the focus ring) and `line` (dividers). Text and the notes need at least 4.5:1 on the background and the panel, the accent at least 3:1 on the background. The "How safe is this web app?" page always keeps the official colours.

Dialog colour (`colors.dialog.background`): every box that opens in the middle of the screen — usage numbers, the list
of working robots, the load line, confirmations, contact cards — and the full-screen reader share one background, Noir (`#2c2b26`) by default.
Change this one value and every centred dialog follows. The text on it is Lotion white, so the colour must be dark
enough: below 4.5:1 against Lotion, validation fails.

Your colours do not have to come from any palette. The factory colours all come from Agent J's own palette.

## What always stays official

Whatever a theme says, these keep Agent J's own look, so you can always tell the real pages from a copy: pairing and
the safety code, the security pages (网页版 badge and its panel, the shield line in the menu), the offline and removed
screens, the icon on your home screen, the fonts, and every page on agentj.app. Outside the chat page the top-left logo
also stays official.

## How it works

A theme is one folder: `theme.json` (the settings) and the PNG files it names. Every part is optional: what you leave
out keeps the factory look. Your Agent (or you, in a terminal) runs:

1. Start from a copy of a factory look:

   ```bash
   agentj theme export robots ~/agentj-themes/night-owl
   ```

2. Edit `theme.json` and the images.
3. Check it — only a folder that passes every rule can be switched on:

   ```bash
   agentj theme validate ~/agentj-themes/night-owl
   ```

4. Switch it on:

   ```bash
   agentj theme apply ~/agentj-themes/night-owl
   ```

A small example that changes only two colours and keeps everything else:

```json
{
  "schema": 1,
  "id": "night-owl",
  "name": { "zh": "夜猫子", "en": "Night owl" },
  "colors": { "state": { "idle": "#2d4f83", "working": "#8a4fb0" } }
}
```

The full list of settings is the theme schema (JSON Schema): `agentj theme schema`, or
https://agentj.app/schema/agentj-theme-2.json.

## When a check fails

`validate` prints one line per rule that failed — where in `theme.json`, what is wrong, and the number it expected —
and changes nothing:

```text
✗ colors.state.idle: #ffe292 太浅：上面的白字（Lotion #faf9f5）对比度只有 1.20:1，至少 2.5:1，调深一点 / #ffe292 is too light: the Lotion #faf9f5 text on it is only 1.20:1, needs 2.5:1 — go darker
✗ busy.robots.sheet_18: r18.png 必须是 234×54 像素（13 帧 × 18 像素宽，3 个机器人 × 18 像素高；现在 234×36）/ r18.png must be 234×54 px (13 frames × 18 px across, 3 robots × 18 px down; now 234×36)
✗ 2 项没通过，改好再 validate；什么都没改 / 2 failed — fix and validate again; nothing was changed
```

Fix, check again, until it says 「全部通过」 / all checks passed.

## Go back — nothing is ever lost

Each time a theme is switched on, the one before it goes to sleep (the last 20 are kept).

| You want | Command |
|---|---|
| see the factory looks, the current one and the sleeping ones | `agentj theme list` |
| bring a sleeping one back (the current one goes to sleep) | `agentj theme restore <name from the list>` |
| the factory look (dancing robots) | `agentj theme reset` |
| the round dots | `agentj theme apply dots` |

Light or dark mode is a separate switch and works as before: `agentj theme dark`, `agentj theme light`, `agentj theme system`.

<details>
<summary>Technical details</summary>

- The theme lives on your computer, in Agent J's state folder (`agentperm/theme/`: the current one, `active/`, and
  `dormant/`). `apply` checks a private copy again before switching, so what passed is exactly what the phone gets.
- Agent J sends the theme to your paired phones through the same end-to-end encrypted channel as your messages; we never
  see it. The page checks every value again (colours `#rrggbb`, PNG files and their exact pixel sizes) and ignores
  anything else; a damaged theme falls back to the factory look.
- Rules in numbers: state colours ≥ 2.5:1 against Lotion `#faf9f5`, card fills ≥ 4.5:1 against Noir `#2c2b26`; the
  whole theme at most 512 KiB.

</details>

More on the robots and how to draw your own: [the robots](/docs/robots/).


Theme format 2: `logo` accepts either the legacy `{image, disc}` or `{states: {idle, working, waiting, question, offline}, disc}`. All five static PNGs must be 128×128 or 256×256, the same size, each ≤64 KiB and nonempty. Validation checks each against its corresponding state background in light and dark mode: at least 10% of the canvas must reach 2.5:1 against the background (or the opaque Lotion disc); the disc itself must reach 2.5:1. The page preloads all five images and switches with the state. Old schema 1 single-image themes still apply. `send_icon` is unchanged.

Before redrawing dancing robots, ask whether the owner also wants a new logo set. Only build the set if requested; otherwise retain the active logo. Validate everything before applying.

Outside chat, the official Agent J Father logo dances in the current state colour (12 frames, 2.4 seconds). Reduced motion uses a static logo with an inset heartbeat outline. Tap opens the menu; hold returns to chat.