spherse-create-agent-chat-theme

Agent Chat Theme

Agent chat themes live in the agent directory as theme.css (.spherse/agents/{agent-slug}/theme.css).

写法：原生 CSS Nesting

用原生 CSS nesting 编写，最外层包裹 [data-chat-root] { ... }，所有规则嵌套其中。Electron 渲染进程跑在现代 Chromium 上（Chrome 112+ 起原生支持 CSS nesting）。主题以 <link rel="stylesheet"> 从项目 preview 路由载入（与项目级主题一致），不做任何转换。

[data-chat-root] {
  /* 根级变量 */
  --sp-background: #0c0b12;

  /* 嵌套选择器——自动作用域到 chat 内 */
  [data-chat-header] { border-bottom: 1px solid #2a2932; }
  [data-chat-bubble] { border-radius: 12px; }
}

不要把根级变量 / 背景声明写在最外层之外。它们必须落在 [data-chat-root] { ... } 内，才能作用于聊天窗口。

层叠关系

聊天主题遵循三级层叠（低 → 高优先级）：

1. App defaults（styles.css）— 内置 :root / --sp-* 变量
2. Project theme（.spherse/theme.css，通过 document.head 的 <link> 注入）— 可覆盖 UI 变量，也可写 [data-chat-root] { ... } 块，作为所有 chat 窗口的全局默认样式
3. Agent theme（本文件，chat 容器内后载入的 <link>）— 相同特异性下覆盖 project theme 的 chat 规则

优先级原理：agent theme 的 <link> 渲染在 chat 容器内，DOM 顺序上比 project theme 的 <link>（位于 document.head）更靠后。CSS 层叠规则下，相同特异性的规则后者胜出，因此 agent theme 自然覆盖 project theme 的 chat 规则。

想给所有 agent 设统一聊天默认样式，优先写进项目级 .spherse/theme.css 的 [data-chat-root] { ... } 块；单个 agent 覆盖默认值，写在本文件里。

选择器速查

目标	选择器
Chat 根级颜色变量	在 [data-chat-root] { ... } 内声明 --sp-* 变量
Chat 根级渐变/图片背景	在 [data-chat-root] { ... } 内写 background: / background-image:
Header	[data-chat-header]
消息外层行	[data-chat-message][data-role="user"] 或 [data-role="assistant"]
消息气泡	[data-chat-bubble]
Trigger 对话轮折叠摘要条	[data-chat-turn-collapse]
助手头像	[data-chat-message][data-role="assistant"]::before
Composer 外层	[data-chat-composer]
输入框外框	[data-chat-composer-input]
文本输入区文字	[data-chat-composer] textarea
Placeholder	[data-chat-composer] textarea::placeholder
代码块	[data-md-code]
行内代码	[data-md-code-inline]
引用块	[data-md-quote]

滚动条：在 [data-chat-root] { ... } 内覆盖 --sp-scrollbar-* 变量（--sp-scrollbar-thumb / --sp-scrollbar-thumb-hover / --sp-scrollbar-size / --sp-scrollbar-track）即可只改变聊天窗口的滚动条外观；变量与默认值详见 spherse-create-ui-theme skill 的「滚动条」一节。agent theme 的 <link> 在 DOM 中比 project theme 更靠后，相同特异性下自然覆盖项目级滚动条设置。