speaker-colours-rosepine · Claude Code mod

Preview · a replayed session in a sandbox

claude · ~/work/app · speaker-colours-rosepine

┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │❯ fix the failing auth test and add an audit log call │ └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ ⏺ Read(src/auth.ts) ⎿ Read 6 lines ⏺ Update(src/auth.ts) ⎿ Added 2 lines, removed 1 line ⏺ Bash(bun test) ⎿ 3 pass, 1 fail ┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │⟨Claude Code's own drawing⟩ │ └────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ ✻ Worked for 42s · done 4:20 PM ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── › ? for shortcuts

Draws

Your message

┌──────────────────────────────────────────────────────────────────────────────────────────────────┐ │❯ fix the failing auth test and add an audit log call │ └──────────────────────────────────────────────────────────────────────────────────────────────────┘

Claude's reply

┌──────────────────────────────────────────────────────────────────────────────────────────────────┐ │⟨Claude Code's own drawing⟩ │ └──────────────────────────────────────────────────────────────────────────────────────────────────┘

README

ty-mods

Ty 自己的 Claude Code mod（plugin）集合，同时是本地的 mod 制作目录。

安装

/plugin marketplace add Ty-Stev/ty-mods
/plugin install <mod>@ty-mods

mod 列表

mod	说明
`context-bar`	在输入框上方用一条堆叠条显示 context window 占用，每个类别一种颜色，带 token 数、占比和自动压缩阈值。`/context-bar` 显示或隐藏，选择跨会话保留。fork 自 hamzafer/claude-code-mods，把过长的类别名改短。
`speaker-colours-rosepine`	Rosé Pine 配色：你的消息用 foam 色条，Claude 的回复用 rose 色条。fork 自 Herman Chan 的 speaker-colours。

开发

改完 mod 源码不会自动生效——Claude Code 会把 plugin 复制到 ~/.claude/plugins/cache/ty-mods/<mod>/<version>/，必须重装一次：

claude plugin install <mod>@ty-mods -y

改完顺手 bump plugin.json 里的 version，否则缓存目录名不变，很难判断是否刷新了。用 claude plugin list --json 对比 version 和 folderVersion 能查出来。

写新 mod 的完整流程见 Claude Code 的 plugin-authoring skill。

Source 1 files

hooks/register.tsx 41 lines

1import type { Register } from 'claude-code'
2
3// 配色取自 Rosé Pine（Ghostty 当前主题），色值来自终端截图采样：
4// foam #9ccfd8 是日期那个蓝，rose #ebbcba 是文件夹名那个粉。
5// 你的消息：实心 foam 蓝气泡压暗三档，文字不指定颜色，用默认前景色，和 Claude 那边一致。
6// Claude 回复：rose 粉调压暗的底，保持默认浅色文字（长回复和代码块需要深底）。
7const USER_BG = '#26505a' // Rosé Pine foam 压暗三档，默认白字在其上 6.7:1
8const USER_BORDER = '#9ccfd8' // Rosé Pine foam 原色，比底色亮一档，勾出边框
9const CLAUDE_BORDER = '#ebbcba' // Rosé Pine rose
10const CLAUDE_TINT = '#2c1c21'
11
12export const register: Register = on => {
13  // 你的输入：引擎会在文字后面自己刷一条灰色底，和 tint 打架。手打的输入是纯文本，
14  // 所以这里直接接管绘制。其他来源（任务通知、peer 消息）保持引擎自己的画法。
15  on('ui.render', { component: 'UserMessage' }, async ($, e, next) => {
16    if (e.props.origin.kind !== 'composer') {
17      return next(e)
18    }
19
20    const { Box, Text } = $.ui.resolve(e)
21
22    return (
23      <Box borderStyle="quote" borderColor={USER_BORDER} backgroundColor={USER_BG}>
24        <Text>{'❯ ' + e.props.text}</Text>
25      </Box>
26    )
27  })
28
29  // Claude 的回复：先拿引擎自己画的结果，再套一层粉色 bar 和淡底。
30  on('ui.render', { component: 'AssistantMessage' }, async ($, e, next) => {
31    const theirs = await next(e)
32    const { Box } = $.ui.resolve(e)
33
34    return (
35      <Box borderStyle="quote" borderColor={CLAUDE_BORDER} backgroundColor={CLAUDE_TINT}>
36        {theirs}
37      </Box>
38    )
39  })
40}
41