文档Docs
换成你自己的样子:颜色、logo、发送图标、机器人Your own look — colours, logo, Send icon, robots
手机网页的状态底色、消息卡片、左上角 logo、发送按钮图标和跳舞机器人都能换,也能换回圆点。一个文件夹,按规则检查通过才生效;原来的样子会休眠,一条命令就能换回来。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.
手机网页可以换成你喜欢的样子:换背景颜色,左上角放你自己的 logo,发送按钮换个图标,画你自己的跳舞机器人,或者换回安静的小圆点。Agent J 出厂带两套样子:
| 样子 | 是什么 |
|---|---|
| robots(默认) | 回复卡右上角跳舞的 16 个像素小机器人,一个机器人就是一个在后台干活的 Agent(后台小机器人) |
| dots | 以前的小圆点:一个 Agent 一个点,轻轻闪,不跳舞 |
最省事的办法,是直接跟你自己的 Agent J 说。用大白话就行:「把空闲时的绿色换成深蓝色」「左上角换成我们公司的 logo」「按我们的品牌色画四个机器人」「换回圆点」。它知道所有规则(自带的 agentj-theme 技能),会做好主题、检查、换上。手机几秒内自己刷新,不用重新打开。
能换什么
| 部分 | 在手机上的哪里 | 规则 |
|---|---|---|
| 状态底色 | 整个聊天页:等你说话(绿)、在干活(蓝)、等你批准(橙)、等你选答案(紫)、断开(灰) | 什么颜色都行;上面的白字要看得清(对比度至少 2.5:1),五种颜色要一眼分得开;深色模式会自动调深 |
| 消息卡片 | 每一页最上面那张卡片,按谁发的分:你、别的 Agent、电脑上打的字、开发工具、系统和定时任务 | 用浅色:上面的深色字对比度至少 4.5:1 |
| logo | 聊天页左上角 | PNG,正方形,128 × 128 或 256 × 256 像素,最大 64 KiB,静态图;后面那个浅色圆底可以留也可以去掉 |
| 发送图标 | 发送按钮上的图案(现在是小火箭) | 透明背景的 PNG,128 × 128 或 256 × 256 像素,最大 32 KiB;只用它的形状(统一画成白色),四个角要透明,图案占 5%–70% |
| 机器人 | 回复卡右上角 | 1–16 个像素画机器人(规则见后台小机器人) |
| 圆点 | 同一个位置,代替机器人 | 1–9 对颜色;每个点在自己的两种颜色之间闪 |
菜单颜色(colors.menu):「设置」「全部命令」「键盘快捷键」这些菜单页默认是深色的(底色和页眉 Noir,分组 Sooty,文字 Lotion,强调色 Milky Waves)。主题可以改 background(底色)、panel(分组底色)、text(文字和图标)、accent(开关、选中标记和焦点框)、line(分隔线)。文字和说明文字在底色、分组底色上的对比度都至少 4.5:1,强调色在底色上至少 3:1。「这个网页版有多安全」页始终用官方配色。
弹窗颜色(colors.dialog.background):屏幕中间弹出的方框——用量、在办的机器人清单、负载线、确认框、联系人卡片——和全屏阅读都用同一个底色,默认 Noir(#2c2b26)。主题改这一个值,所有居中弹窗一起换。弹窗上的字是 Lotion 白字,所以这个颜色要够深:和 Lotion 的对比度不到 4.5:1,检查就不通过。
你自己选的颜色不受任何调色板限制。出厂的颜色全部来自 Agent J 自己的调色板。
永远是官方样子的部分
不管主题里写了什么,下面这些都保持 Agent J 自己的样子,这样你永远分得清真页面和仿冒页面:配对和安全码页面,安全相关的页面(「网页版」标志和它的说明、菜单里的盾牌那一行),断开和已移除的页面,主屏幕上的图标,字体,以及 agentj.app 上的所有页面。离开聊天页以后,左上角的 logo 也是官方的。
怎么做
一个主题就是一个文件夹:theme.json(设置)加上它用到的 PNG 图片。每一部分都可以不写,没写的部分保持出厂样子。你的 Agent(或者你自己在终端里)这样做:
- 从一套出厂样子复制一份开始:
agentj theme export robots ~/agentj-themes/night-owl
- 改
theme.json和图片。 - 检查。只有每条规则都通过的文件夹才能换上:
agentj theme validate ~/agentj-themes/night-owl
- 换上:
agentj theme apply ~/agentj-themes/night-owl
一个只改两种颜色、其余都不动的小例子:
{
"schema": 1,
"id": "night-owl",
"name": { "zh": "夜猫子", "en": "Night owl" },
"colors": { "state": { "idle": "#2d4f83", "working": "#8a4fb0" } }
}
全部设置项写在主题的 JSON Schema 里:运行 agentj theme schema,或者看 https://agentj.app/schema/agentj-theme-2.json 。
检查没通过怎么办
validate 每条没通过的规则打一行:在 theme.json 的哪里、哪里不对、应该是多少。它什么都不会改:
✗ 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
改好再检查,直到显示「全部通过」。
换回去:什么都不会丢
每换上一个主题,原来那个就进入休眠(保留最近 20 个)。
| 你想 | 命令 |
|---|---|
| 看出厂的、正在用的和休眠的主题 | agentj theme list |
| 唤醒一个休眠的主题(正在用的那个去休眠) | agentj theme restore <列表里的名字> |
| 回到出厂样子(跳舞机器人) | agentj theme reset |
| 换成小圆点 | agentj theme apply dots |
浅色、深色是另一个开关,用法不变:agentj theme dark、agentj theme light、agentj theme system。
技术细节
- 主题存在你自己的电脑上,在 Agent J 的状态文件夹里(
agentperm/theme/:当前设置、active/和dormant/)。apply换上之前会对一份私有副本再检查一遍,所以检查通过的就是手机收到的。 - Agent J 通过和你的消息同一条端到端加密通道,把主题发给已配对的手机,我们看不到。网页会把每个值再检查一遍(颜色
#rrggbb、PNG 文件和它的准确像素尺寸),其他的一概不用;主题坏了就回到出厂样子。 - 规则里的数字:状态底色对 Lotion
#faf9f5至少 2.5:1,卡片底色对 Noir#2c2b26至少 4.5:1;整个主题最大 512 KiB。
机器人的更多介绍和怎么画你自己的机器人:后台小机器人。
主题格式 2 支持一组五张 logo:logo.states 里分别填写 idle、working、waiting、question、offline 的文件名,也兼容格式 1 的单张 logo.image。五张都要是静态 PNG,尺寸一致,128×128 或 256×256,每张不超过 64 KiB,画面不能近乎空白。校验会检查每张图在对应状态底色上的深浅色对比度:至少 10% 的画布像素达到 2.5:1;保留奶白圆盘时,圆盘与底色也要达到 2.5:1。发送图标规则不变。
更换跳舞机器人时,Agent J 会先问要不要同时换 logo。要换就做一组五张,同形、随五种状态换机身主色,并逐张校验;不换就保留当前 logo 组,当前没有自定义组则使用出厂组。
非聊天页的官方 Agent J Father logo 随当前状态换色,用 12 帧舞步循环 2.4 秒。开启减少动态效果时显示静态图与边界内心跳描边。单击打开菜单,长按返回聊天。
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) |
| 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) |
| 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:
- Start from a copy of a factory look:
agentj theme export robots ~/agentj-themes/night-owl
- Edit
theme.jsonand the images. - Check it — only a folder that passes every rule can be switched on:
agentj theme validate ~/agentj-themes/night-owl
- Switch it on:
agentj theme apply ~/agentj-themes/night-owl
A small example that changes only two colours and keeps everything else:
{
"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:
✗ 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.
Technical details
- The theme lives on your computer, in Agent J's state folder (
agentperm/theme/: the current one,active/, anddormant/).applychecks 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.
More on the robots and how to draw your own: the 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.