专门为 @bachi/pi-coder 定制的三套暗色 PI 主题 —— 调色板分别取自 catppuccin mocha、ayu dark,以及 Codex CLI 内置的 1337。面向 mac retina 屏完成微调,适配深夜编程体验。
皮肤源文件来自 @bachi/pi-coder,展示页色值取自 themes 目录下三个 pi-coder- 前缀的皮肤文件,
点击任意色块可复制其十六进制值。底部有 PI 着色预览。
在官方 Catppuccin Mocha 基础上面向 retina 屏做了大量微调,三档深底(crust / mantle / base)撑起层次。唯一一处"越界"是强调色:用的是 Macchiato 的 lavender #B7BDF8(重命名为 macchiatoLavender),而不是 Mocha 自己的 mauve —— mauve 被降级去当工具标题与关键字。
// pi-coder-catppuccin · syntax sampler import { Skin } from "./theme.js"; const palette = await load("pi-coder-catppuccin"); export default class Catppuccin extends Skin { levels = [0, 25, 50, 75, 100]; // 思考强度阶梯 mix(a, b) { return a.map((v, i) => (v + b[i]) / 2); } }
文件 themes/pi-coder-catppuccin.json · 31 个变量(其中 30 个被引用)、54 个槽位赋值。
值得注意的几处偏移:error 用 maroon #EBA0AC 而非 red;syntaxFunction 用 sky 而非 blue;工具面板只剩成功 / 失败两态(#151515 / #171010,自造近黑,比 Mocha 的 surface 系更沉)—— toolPendingBg 已清空成终端底色。syntaxVariable 与 text 一样是空串(终端默认色),上面语法取样里那一格用调色板的 text #CDD6F4 近似显示。
一整套暖橙 + 青蓝的主题,灰阶和主色调都做了微调。语法槽位贴着官方 ayu Dark 走(10 个角色对齐后平均 ΔE 只有 1.72),灰阶与面板是自家第三套值,比 Dark 更沉。字符串没有用官方的 #AAD94C,而是压暗到 stringGreen #67A567。
// pi-coder-ayu · syntax sampler import { Skin } from "./theme.js"; const palette = await load("pi-coder-ayu"); export default class Ayu extends Skin { levels = [0, 25, 50, 75, 100]; // 思考强度阶梯 mix(a, b) { return a.map((v, i) => (v + b[i]) / 2); } }
文件 themes/pi-coder-ayu.json · 27 个变量、55 个槽位赋值。
xhigh 与 max 同色(#626262)。相比于官方 ayu 色系做了大量的调整,主要是代码块 diff 和 pi 工具调用色块的底色等等做了调整。
这个主题源自 Codex CLI 的内置主题 1337,原作出自 Mark Herpich 的 Sublime 配色。底色是中性近黑,代码全走它自己那套高饱和色,一眼就能辨出;1337 本身只定义了语法、没有任何 UI 槽位,所以界面色全部从它那 28 个色值里取,整体呈现的风格更加让 pi 靠近 codex 的氛围感。
// pi-coder-1337 · syntax sampler import { Skin } from "./theme.js"; const palette = await load("pi-coder-1337"); export default class Leet extends Skin { levels = [0, 25, 50, 75, 100]; // 思考强度阶梯 mix(a, b) { return a.map((v, i) => (v + b[i]) / 2); } }
文件 themes/pi-coder-1337.json · 35 个变量、59 个槽位赋值(toolPendingBg 是空串,其余 58 个都引用 vars)。
移植自 Codex CLI 内置的 1337:48 个可核对的作用域里 37 个与上游逐字节同值,其余 11 个是 Codex 侧合并成继承父级、并非改色。
pi 的语法槽比它少,所以有合并(函数名 / 类名共用函数蓝、库函数蓝转 mdLink)与替换(mdHeading 改用 #FF8942;mdCode、卡片底、diff 与思考边框、error 为指定值)。
主题 JSON 里 colors 的槽位(三套取并集,共 53 个),按用途分组。点色块复制 hex。
| 槽位 | catppuccin | ayu | 1337 |
|---|---|---|---|
| 基础与状态 · 12 | |||
| 强调色accent | #B7BDF8macchiatoLavender |
#E6B450accent |
#8CDAFFaccent |
| 边框border | #45475Asurface1 |
#515868dimmed |
#515151selection |
| 高亮边框borderAccent | #CBA6F7mauve |
#E6B450accent |
#8CDAFFaccent |
| 弱边框borderMuted | #313244surface0 |
#232938borderMuted |
#3B3A32invisibles |
| 成功success | #A6E3A1green |
#AAD94Cgreen |
#A6E22Einserted |
| 错误error | #EBA0ACmaroon |
#D95757red |
#E27878removedRed |
| 警告warning | #FAB387peach |
#FF8F40orange |
#FDB082number |
| 次要文本muted | #82889EsecondaryText |
#6B7385muted |
#999999gutterIgnored |
| 最弱文本dim | #7E8398dimText |
#515868dimmed |
#6D6D6Dcomment |
| 默认前景text | 空串 · 终端默认 |
#BFBDB6fg |
#F8F8F2fg |
| 思考文本thinkingText | #82889EsecondaryText |
#6B7385muted |
#6D6D6Dcomment |
| 选中行底selectedBg | #1E1E29selected |
#161D2BselectedBg |
#515151selection |
| 消息块 · 5 | |||
| 用户消息底userMessageBg | #181825mantle |
#1B1C1DuserMessageBg |
#242424userBg |
| 用户消息字userMessageText | #CDD6F4text |
#DBDBDDtextColor |
#F8F8F2fg |
| 自定义消息底customMessageBg | #181825mantle |
#1B1C1DuserMessageBg |
#242424userBg |
| 自定义消息字customMessageText | #CDD6F4text |
#BFBDB6fg |
#F8F8F2fg |
| 自定义消息标签customMessageLabel | #CBA6F7mauve |
#E6B450accent |
#FFB2F9namespacePink |
| 工具调用块 · 4 | |||
| 工具成功底toolSuccessBg | #151515successPanel |
#10151FtoolSuccessBg |
#202020successCard |
| 工具失败底toolErrorBg | #171010errorPanel |
#1B171DtoolErrorBg |
#171010errorCard |
| 工具标题toolTitle | #CBA6F7mauve |
#E6B450accent |
#8CDAFFfuncBlue |
| 工具输出toolOutput | #82889EsecondaryText |
#BFBDB6fg |
#D0D0D0softFg |
| Markdown · 10 | |||
| 标题mdHeading | #FAB387peach |
#FF8F40orange |
#FF8942constantLanguage |
| 链接mdLink | #89B4FAblue |
#59C2FFentityBlue |
#6699CClibFunc |
| 链接 URLmdLinkUrl | #BAC2DEsubtext1 |
#6B7385muted |
#6D6D6Dcomment |
| 行内代码mdCode | #94E2D5teal |
#95E6CBcyan |
#0D92C1mdCodeCyan |
| 代码块正文mdCodeBlock | #CDD6F4text |
#BFBDB6fg |
#F8F8F2fg |
| 代码块围栏mdCodeBlockBorder | #45475Asurface1 |
#515868dimmed |
#515151selection |
| 引用正文mdQuote | #BAC2DEsubtext1 |
#6B7385muted |
#D0D0D0softFg |
| 引用竖线mdQuoteBorder | #45475Asurface1 |
#515868dimmed |
#515151selection |
| 分隔线mdHr | #6C7086overlay0 |
#515868dimmed |
#6D6D6Dcomment |
| 列表符号mdListBullet | #FAB387peach |
#FF8F40orange |
#FBDFB5storageType |
| Diff · 5 | |||
| 差异新增toolDiffAdded | #A6E3A1green |
#AAD94Cgreen |
#8BC391addedGreen |
| 差异删除toolDiffRemoved | #F38BA8red |
#D95757red |
#E27878removedRed |
| 差异上下文toolDiffContext | #BAC2DEsubtext1 |
#6B7385muted |
#D0D0D0softFg |
| 差异新增底toolDiffAddedBg | #1C241BdiffAddedBg |
#1D241CdiffAddedBg |
#1C241BaddedLine |
| 差异删除底toolDiffRemovedBg | #2E1C21diffRemovedBg |
#321D23diffRemovedBg |
#2E1C21removedLine |
| 语法高亮 · 9 | |||
| 注释syntaxComment | #A6ADC8subtext0 |
#6B7385muted |
#6D6D6Dcomment |
| 关键字syntaxKeyword | #CBA6F7mauve |
#FF8F40orange |
#FF5E5Ekeyword |
| 函数名syntaxFunction | #89DCEBsky |
#FFB454function |
#8CDAFFfuncBlue |
| 变量名syntaxVariable | 空串 · 终端默认 |
#BFBDB6fg |
#E9FDACvariable |
| 字符串syntaxString | #A6E3A1green |
#67A567stringGreen |
#FBE3BFstring |
| 数字syntaxNumber | #FAB387peach |
#D2A6FFpurple |
#FDB082number |
| 类型名syntaxType | #F9E2AFyellow |
#59C2FFentityBlue |
#8CDAFFfuncBlue |
| 运算符syntaxOperator | #74C7ECsapphire |
#F29668operator |
#F8F8F2fg |
| 标点syntaxPunctuation | #7F849Coverlay1 |
#6B7385muted |
#FFFFFFwhite |
| 思考档边框 · 7 | |||
| 思考档 offthinkingOff | #7F849Coverlay1 |
#515868dimmed |
#3B3A32invisibles |
| 思考档 minimalthinkingMinimal | #9399B2overlay2 |
#6B7385muted |
#515151selection |
| 思考档 lowthinkingLow | #89B4FAblue |
#39BAE6blue |
#6699CClibFunc |
| 思考档 mediumthinkingMedium | #CBA6F7mauve |
#E6B450accent |
#97D8EAtagAttr |
| 思考档 highthinkingHigh | #FAB387peach |
#FF8F40orange |
#D699FFlanguageLiteral |
| 思考档 xhighthinkingXhigh | #626262thinkingGrey |
#626262thinkingGrey |
#696969thinkingGrey |
| 思考档 maxthinkingMax | #626262thinkingGrey |
#626262thinkingGrey |
#696969thinkingGrey |
| 编辑器 · 1 | |||
| Bash 模式边框bashMode | #FAB387peach |
#FF8F40orange |
#FC9354param |
取自一次真实会话:上半是聊天区,下半是 pi 的输入框、任务清单和 statusline。点下面的按钮换皮肤。
server.js 已从 HTTP 切到 HTTPS,其余逻辑(/api/ 反代、MIME、目录穿越防护)未动。
server.js:新增 TLS_OPTIONS 加载 cert/abc.com+5.pem / cert/abc.com+5-key.pem,入口改为 https.createServer(TLS_OPTIONS, handleRequest)。CLAUDE.md:更新启动命令注释、协议说明和文件表里 server.js / cert/ 两行。其他三份实现(Go / Rust / Python)仍是 HTTP,未改 —— 详见 README。
输入框上方那行是 simple-task 的任务清单(已完成的 ✔ 用 success、正文用 dim 加删除线),下面依次是
pi 的输入框(边框与 ❯ 取当前思考档的颜色,这里是 max → 本主题的 thinkingMax;左上一段是工作指示器嵌在边框里的样子)
与 statusline 两行: ⚡️ 模型/档位 | Ctx 百分比 | 分支 | (+增,-删) | 状态,第二行是所有扩展 setStatus 的文本(任务计数、cwd)。
分支图标用的是 ⎇(U+2387,通用符号区,没装 Nerd Font 的机器也能正常显示)。