pi themes · color plates
@bachi/pi-coderpi.dev · pi 插件包

pi-coder 三色三套暗色 PI 主题风格,完美适配 PI,深夜编程不瞌睡

专门为 @bachi/pi-coder 定制的三套暗色 PI 主题 —— 调色板分别取自 catppuccin mocha、ayu dark,以及 Codex CLI 内置的 1337。面向 mac retina 屏完成微调,适配深夜编程体验。 皮肤源文件来自 @bachi/pi-coder,展示页色值取自 themes 目录下三个 pi-coder- 前缀的皮肤文件, 点击任意色块可复制其十六进制值。底部有 PI 着色预览。

macchiatoLavender #B7BDF8 mauve #CBA6F7 blue #89B4FA sky #89DCEB teal #94E2D5 green #A6E3A1 yellow #F9E2AF peach #FAB387
01

卡布 catppuccin

30 vars · 官方 Mocha + 10 个自定义

在官方 Catppuccin Mocha 基础上面向 retina 屏做了大量微调,三档深底(crust / mantle / base)撑起层次。唯一一处"越界"是强调色:用的是 Macchiato 的 lavender #B7BDF8(重命名为 macchiatoLavender),而不是 Mocha 自己的 mauve —— mauve 被降级去当工具标题与关键字。

语义槽位ui roles
accent#B7BDF8强调色
toolTitle#CBA6F7工具标题
mdHeading#FAB387标题
mdLink#89B4FA链接
mdCode#94E2D5行内代码
success#A6E3A1成功
error#EBA0AC错误(用 maroon,非 red)
warning#FAB387警告
muted#82889E次要文本
dim#7E8398最弱文本
语法取样syntax sampler
// 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); }
}
comment#A6ADC8
keyword#CBA6F7
function#89DCEB
variable#CDD6F4
string#A6E3A1
number#FAB387
type#F9E2AF
operator#74C7EC
punctuation#7F849C
全部变量used vars · 30
mauve#CBA6F7
red#F38BA8
maroon#EBA0AC
peach#FAB387
yellow#F9E2AF
green#A6E3A1
teal#94E2D5
sky#89DCEB
sapphire#74C7EC
blue#89B4FA
text#CDD6F4
subtext1#BAC2DE
subtext0#A6ADC8
overlay2#9399B2
overlay1#7F849C
overlay0#6C7086
surface1#45475A
surface0#313244
mantle#181825
crust#11111B
macchiatoLavender#B7BDF8
exportInfoTint#242031
dimText#7E8398
secondaryText#82889E
thinkingGrey#626262
selected#1E1E29
successPanel#151515
errorPanel#171010
diffAddedBg#1C241B
diffRemovedBg#2E1C21

文件 themes/pi-coder-catppuccin.json · 31 个变量(其中 30 个被引用)、54 个槽位赋值。 值得注意的几处偏移:error 用 maroon #EBA0AC 而非 red;syntaxFunction 用 sky 而非 blue;工具面板只剩成功 / 失败两态(#151515 / #171010,自造近黑,比 Mocha 的 surface 系更沉)—— toolPendingBg 已清空成终端底色。syntaxVariable 与 text 一样是空串(终端默认色),上面语法取样里那一格用调色板的 text #CDD6F4 近似显示。

accent #E6B450 orange #FF8F40 function #FFB454 green #AAD94C stringGreen #67A567 cyan #95E6CB blue #39BAE6 purple #D2A6FF
02

阿玉 ayu

27 vars · 官方 Dark 血统 · 自成一档的灰阶

一整套暖橙 + 青蓝的主题,灰阶和主色调都做了微调。语法槽位贴着官方 ayu Dark 走(10 个角色对齐后平均 ΔE 只有 1.72),灰阶与面板是自家第三套值,比 Dark 更沉。字符串没有用官方的 #AAD94C,而是压暗到 stringGreen #67A567。

语义槽位ui roles
accent#E6B450强调色
toolTitle#E6B450工具标题
mdHeading#FF8F40标题
mdLink#59C2FF链接
mdCode#95E6CB行内代码
success#AAD94C成功
error#D95757错误
warning#FF8F40警告
muted#6B7385次要文本
dim#515868最弱文本
语法取样syntax sampler
// 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); }
}
comment#6B7385
keyword#FF8F40
function#FFB454
variable#BFBDB6
string#67A567
number#D2A6FF
type#59C2FF
operator#F29668
punctuation#6B7385
全部变量used vars · 27
bg#0D1017
panelBg#0B0E14
textColor#DBDBDD
fg#BFBDB6
muted#6B7385
dimmed#515868
accent#E6B450
orange#FF8F40
green#AAD94C
stringGreen#67A567
cyan#95E6CB
blue#39BAE6
entityBlue#59C2FF
purple#D2A6FF
red#D95757
operator#F29668
function#FFB454
borderMuted#232938
thinkingGrey#626262
bashOutput#6B7385
selectedBg#161D2B
userMessageBg#1B1C1D
toolSuccessBg#10151F
toolErrorBg#1B171D
infoBg#1A1610
diffAddedBg#1D241C
diffRemovedBg#321D23

文件 themes/pi-coder-ayu.json · 27 个变量、55 个槽位赋值。 xhigh 与 max 同色(#626262)。相比于官方 ayu 色系做了大量的调整,主要是代码块 diff 和 pi 工具调用色块的底色等等做了调整。

bg #191919 lineHighlight #3D3D3D selection #515151 comment #6D6D6D gutterIgnored #999999 white #FFFFFF fg #F8F8F2 softFg #D0D0D0
03

黑客 1337

35 vars · Codex CLI 内置主题 · 纯语法血统

这个主题源自 Codex CLI 的内置主题 1337,原作出自 Mark Herpich 的 Sublime 配色。底色是中性近黑,代码全走它自己那套高饱和色,一眼就能辨出;1337 本身只定义了语法、没有任何 UI 槽位,所以界面色全部从它那 28 个色值里取,整体呈现的风格更加让 pi 靠近 codex 的氛围感。

语义槽位ui roles
accent#8CDAFF强调色
toolTitle#8CDAFF工具标题
mdHeading#FF8942标题
mdLink#6699CC链接
mdCode#0D92C1行内代码(指定)
success#A6E22E成功
error#E27878错误 · 与 diff 删除行同色
warning#FDB082警告
muted#999999次要文本
dim#6D6D6D最弱文本
语法取样syntax sampler
// 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); }
}
comment#6D6D6D
keyword#FF5E5E
function#8CDAFF
variable#E9FDAC
string#FBE3BF
number#FDB082
type#8CDAFF
operator#F8F8F2
punctuation#FFFFFF
全部变量used vars · 35
bg#191919
invisibles#3B3A32
lineHighlight#3D3D3D
selection#515151
comment#6D6D6D
gutterIgnored#999999
white#FFFFFF
fg#F8F8F2
softFg#D0D0D0
string#FBE3BF
number#FDB082
constantLanguage#FF8942
variable#E9FDAC
keyword#FF5E5E
storageType#FBDFB5
funcBlue#8CDAFF
param#FC9354
tagAttr#97D8EA
libFunc#6699CC
languageLiteral#D699FF
namespacePink#FFB2F9
inserted#A6E22E
userBg#242424
accent#8CDAFF
mdCodeCyan#0D92C1
successCard#202020
errorCard#171010
thinkingGrey#696969
bashOutput#999999
addedGreen#8BC391
addedLine#1C241B
removedLine#2E1C21
removedRed#E27878
cardBg#181825
pageBg#111111

文件 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。

槽位catppuccinayu1337
基础与状态 · 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。点下面的按钮换皮肤。

当前皮肤 themes/pi-coder-1337.json
pi · session 01a0b95e · /Users/bachi/ttt/a leet
修改 server.js 到 https,如果已经是 https,就修改到 http,用 新建 tasks 来实现
Think: The user wants me to toggle server.js between HTTPS and HTTP. They say 「用 新建 tasks 来实现」— use the task list to do this. First, let me read server.js to see the current state.…
Read /Users/bachi/ttt/a/server.js (120 lines)
// 监听走纯 HTTP;反代上游按 PROXY_TARGET 协议选择 http/https const https = require('https'); const PORT = process.env.PORT || 18080;
Bash ls -la /Users/bachi/ttt/a/cert/
total 16 drwxr-xr-x@ 4 bachi staff 128 Jul 22 10:07 . -rw-r--r--@ 1 bachi staff 1123 Jul 22 10:07 abc.com+5.pem -rw-------@ 1 bachi staff 1704 Jul 22 10:07 abc.com+5-key.pem
Edit /Users/bachi/ttt/a/server.js 3 blocks
const PORT = process.env.PORT || 18080;
- const server = http.createServer(handleRequest);
+ const server = https.createServer(TLS_OPTIONS, handleRequest);
- console.log(`HTTP 静态资源服务器已启动: http://localhost:${PORT}`);
+ console.log(`HTTPS 静态资源服务器已启动: https://localhost:${PORT}`);

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。

● 4 tasks (4 done)
✔ #1 确认 server.js 当前协议与历史 HTTPS 写法
✔ #2 把 server.js 切到 HTTPS(加载 cert/ 证书,端口不变)
✔ #3 启动服务并用 curl 验证 HTTPS 静态资源与 /api/ 反代
✔ #4 同步更新 CLAUDE.md 中 server.js 的协议说明
⠹ Thinking
❯ 顺手把 CLAUDE.md 里 server.js 的协议说明也对齐一下
⚡️ deepseek-flash/max | Ctx 8.4% | ⎇ main | (+38,-12) | thinking
✔ 4/4 | 📁 /Users/bachi/ttt/a

输入框上方那行是 simple-task 的任务清单(已完成的 ✔ 用 success、正文用 dim 加删除线),下面依次是 pi 的输入框(边框与 ❯ 取当前思考档的颜色,这里是 max → 本主题的 thinkingMax;左上一段是工作指示器嵌在边框里的样子) 与 statusline 两行: ⚡️ 模型/档位 | Ctx 百分比 | 分支 | (+增,-删) | 状态,第二行是所有扩展 setStatus 的文本(任务计数、cwd)。 分支图标用的是 ⎇(U+2387,通用符号区,没装 Nerd Font 的机器也能正常显示)。