纯 CSS 重塑 CopilotChat 品牌视觉CopilotKit HALCYON 主题定制实战【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKitCopilotKit 的预置组件CopilotChat提供了一套可开箱即用的聊天 UI其默认样式为圆角、系统无衬线字体、极简浅色。本文基于仓库中showcase/integrations/crewai-crews的chat-customization-css示例README.md完整讲解如何不编写任何 React 组件、不覆盖任何 slot、不改动一行组件源码仅凭一份theme.css将CopilotChat从默认外观整体重绘为 HALCYON 温暖纸感编辑部风格——奶油羊皮纸表面、直角几何、铜烬色点缀、展示衬线与等宽字体混排。读完本文你将掌握 CopilotKit v2 主题定制的两层核心机制v2 token 变量覆盖 class 定向样式并能在自己的项目中复刻出一套自包含、可整体搬移的品牌皮肤。演示要回答的问题CSS 能把 CopilotChat 推到多远chat-customization-css这个演示的核心命题是不开组件文件、不做 slot 覆盖、不引入额外框架仅用 CSS 就能让CopilotChat呈现完全不同的品牌气质。默认外观是圆角 系统无衬线 极简浅色HALCYON 则把它变成奶油羊皮纸表面#F4EFE6左上角一团环境烬色光晕叠加一层几乎不可察觉的内联 SVG 纸张颗粒噪声全局 90° 直角radius 覆盖为0px与默认的圆角胶囊完全相反展示级斜体衬线Instrument Serif用于大标题Fraunces 衬线用于助手正文JetBrains Mono 用于用户消息与元信息深铜烬色#C44A1F仅出现在用户消息标记、助手左侧装饰线、发送按钮与聚焦环上克制使用以保持信号感。文档给出的核心理由很直白一个团队可以把CopilotChat从货架上拿来就用只改样式文件就能匹配自己的品牌而永远不需要打开任何组件文件见 README.md。工作机制两层各司其职HALCYON 主题的落地依赖两层配合在[data-copilotkit]上覆盖 v2 token 变量——--background、--foreground、--primary、--muted、--border、--ring、--radius等。运行时渲染出的所有 Tailwind utilitycpk:bg-muted、cpk:text-foreground…都会自动跟随这些变量变色这一层一改全改。class 定向样式——针对.copilotKitChat、.copilotKitMessages、.copilotKitMessage.copilotKitUserMessage、.copilotKitMessage.copilotKitAssistantMessage、.copilotKitInput、欢迎屏、建议胶囊与滚动条等具体类名补齐纯变量表达不了的编辑部级细节。所有选择器都挂在.chat-css-demo-scope命名空间下因此这套主题不会泄漏到 showcase 的其他页面。为什么[data-copilotkit]是 token 注入点从源码看CopilotKit v2 的每个聊天子组件消息、输入框、建议等根部都会渲染div>use client; import React from react; import { CopilotKit, CopilotChat } from copilotkit/react-core/v2; import ./theme.css; export default function ChatCustomizationCssDemo() { return ( CopilotKit runtimeUrl/api/copilotkit agentchat-customization-css div classNameflex justify-center items-center h-screen w-full bg-white p-6 div classNamechat-css-demo-scope h-full w-full max-w-4xl CopilotChat agentIdchat-customization-css classNameh-full attachments{{ enabled: true }} / /div /div /CopilotKit ); }接线要点CopilotKit通过runtimeUrl/api/copilotkit指向前端 runtime 路由agentchat-customization-css选择后端代理名称CopilotChat被包在div classNamechat-css-demo-scope里主题通过页面顶部的import ./theme.css生效页面不传任何 slot 覆盖属性视觉差异 100% 来自样式表——这正是与 chat-slots 演示形成对照的地方。后端接线agent 名如何解析到真实会话chat-customization-css这个 agent 名称注册在前端 runtime 路由 route.ts 的agentNames列表中且没有显式 override因此解析到默认/chat端点。该端点由 chat_flow.py 中的PromptedChatFlow支撑——它是一条只带提示词的普通助手 Flow无后端工具、无状态变更、无委派。route.ts的注释明确写道只需要普通助手的 cell 共享/chat上的中立 chat Flow因为 CrewAI crew 端点会通过build_system_message无条件注入自我介绍并回到 crew 目标的样板提示反而会污染这类纯样式演示的对话体验。agent_server.py中对应add_crewai_flow_fastapi_endpoint(app, PromptedChatFlow(), /chat)见 agent_server.py。注原 README 描述该 agent backed bygraphinsrc/agents/main.py就当前仓库而言实际的支撑实现是src/agents/chat_flow.py的PromptedChatFlowREADME 中的main.py路径在本仓库中不存在接线以 route.ts 与 chat_flow.py 为准。第一层HALCYON 设计 token 与 v2 token 覆盖主题的调色板与字体仓库定义在.chat-css-demo-scope根上theme.css.chat-css-demo-scope { --halcyon-paper: #f4efe6; /* 主羊皮纸面 */ --halcyon-paper-soft: #ece6d9; /* 次级纸面muted 背景 */ --halcyon-paper-elevated: #fbf8f2;/* 悬浮纸面卡片/主前景 */ --halcyon-card: #ffffff; /* 输入卡片 */ --halcyon-rule: #d6cfbe; /* 分隔线 */ --halcyon-rule-strong: #aea48a; /* 强分隔线 */ --halcyon-ink: #1a1714; /* 主墨色 */ --halcyon-ink-soft: #3d362e; /* 次墨色 */ --halcyon-ink-mute: #7a7468; /* 弱化墨色 */ --halcyon-ember: #c44a1f; /* 深铜烬色品牌强调 */ --halcyon-ember-bright: #e45f2b; /* 亮烬色hover */ --halcyon-ember-soft: #f3d7c5; /* 浅烬色tint 背景 */ --halcyon-champagne: #98794a; /* 香槟金辅助光晕 */ --halcyon-display: Instrument Serif, ui-serif, Iowan Old Style, Georgia, serif; --halcyon-serif: Fraunces, Source Serif Pro, ui-serif, Georgia, Times New Roman, serif; --halcyon-sans: Inter Tight, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; --halcyon-mono: JetBrains Mono, ui-monospace, SF Mono, Menlo, Consolas, monospace; --halcyon-shadow-soft: 0 1px 0 rgba(26, 23, 20, 0.04), 0 12px 32px -18px rgba(26, 23, 20, 0.18); --halcyon-shadow-ember: 0 1px 0 rgba(196, 74, 31, 0.18), 0 14px 36px -16px rgba(196, 74, 31, 0.42); }随后在.chat-css-demo-scope [data-copilotkit]上把这些 token 重新指向 CopilotKit v2 的标准 CSS 变量theme.css.chat-css-demo-scope [data-copilotkit] { --background: var(--halcyon-paper); --foreground: var(--halcyon-ink); --card: var(--halcyon-card); --card-foreground: var(--halcyon-ink); --popover: var(--halcyon-paper-elevated); --popover-foreground: var(--halcyon-ink); --primary: var(--halcyon-ember); --primary-foreground: var(--halcyon-paper-elevated); --secondary: var(--halcyon-paper-soft); --secondary-foreground: var(--halcyon-ink); --muted: var(--halcyon-paper-soft); --muted-foreground: var(--halcyon-ink-mute); --accent: var(--halcyon-ember-soft); --accent-foreground: var(--halcyon-ember); --destructive: #b3361b; --destructive-foreground: var(--halcyon-paper-elevated); --border: var(--halcyon-rule); --input: var(--halcyon-rule); --ring: var(--halcyon-ember); --radius: 0px; /* 全局直角化 */ }这套映射可以直接复用任何一份新品牌主题只需先重定义这十余个变量再按需补 class 层。--radius: 0px一句话就把默认的圆角胶囊全部拉直是直角编辑部这一视觉信号性价比最高的一笔。源码侧印证v2 组件内部大量使用cpk:bg-muted、cpk:text-muted-foreground、cpk:border-border等 utility如 CopilotChatAttachmentRenderer.tsx这些取色全部源自上述变量。第二层class 定向的编辑部细节纯 token 无法表达的细节交给类选择器。以下按组件逐一拆解完整实现见 theme.css。聊天外壳与报头chat shell.chat-css-demo-scope .copilotKitChat承担羊皮纸表面三层背景叠加左上角 900×460px 烬色光晕、右下角香槟色弱光晕、内联 SVGfeTurbulence纸张噪声外加 1px 纸色描边与柔和投影。报头则利用::before伪元素固定一条居中的等宽小标签CopilotChat · Customized with CSSpointer-events: none保证不挡交互且在欢迎态、对话中、清空后的空态都常驻。欢迎屏welcome[data-testidcopilot-welcome-screen]是欢迎屏的稳定锚点源码见 CopilotChatView.tsx。HALCYON 把默认的规整无衬线标题替换为clamp(2.4rem, 5vw, 4rem)的斜体展示衬线近似杂志封面头条h1::before加一行烬色等宽 eyebrow CopilotKith1::after加一条 36px 的短装饰线作为视觉落点。用户消息等宽 CLI 传输风格用户消息外层.copilotKitMessage.copilotKitUserMessage去气泡化透明背景、去边框与阴影真正的样式落到内部带bg-muted子串的 bubble 上v2 源码中用户气泡使用cpk:bg-muted见 CopilotChatInput.tsx 同类取色写法因此用[class*bg-muted]作为稳定钩子。最终呈现为一张悬浮纸卡 左侧 2px 烬色竖条::before注入一个烬色→标记让用户发言读起来像一行 CLI 指令。助手消息刊物编辑部的衬线嗓音助手消息.copilotKitMessage.copilotKitAssistantMessage彻底去气泡透明背景、Fraunces 衬线、max-width: 78ch、左侧 1px 烬色竖线::before像出版物版面而不是聊天泡泡。内部.prose全面接管排版段落行高 1.7开启font-feature-settings: ss01…kern:is(h1,h2,h3,h4)切到斜体展示衬线长回答读起来像结构化文章列表 marker 染成烬色ol数字开启tnumblockquote做成斜体展示衬线 pull-quote前置一个 2.4em 的烬色引号行内code是烬色文字 浅烬色底的微型 chip代码块.prose pre与div[data-streamdowncode-block] pre反转为深墨色卡片配淡米色正文像印在书里的代码摘录链接采用烬色下划线text-decoration-color35% 透明、hover 时加深hr收窄成 64px 居中装饰线。输入区与按钮.copilotKitInput从圆角胶囊拍平成直角卡片白色--halcyon-card底、1px 纸色描边、min-height: 56px:focus-within时边框与阴影切换为烬色并轻微上浮translateY(-1px)textarea与占位符分别以 Inter Tight 与斜体弱化墨色呈现。发送按钮button[data-testidcopilot-send-button]源码位于 CopilotChatInput.tsx是 v2 中chatInputToolbarPrimaryvariant编译出cpk:bg-black cpk:text-white cpk:rounded-full cpk:h-9 cpk:w-9这类 tokenHALCYON 用!important逐项覆盖为烬色方块border-radius: 2px、36×36px并定义了 hover亮烬色 上浮、disabled纸色底、弱化墨字、去阴影与内部 SVG 颜色继承。输入区的其余次按钮add-menu plus、mic、transcribe统一为直角 ghost 方块hover 时染成烬色字 浅烬底。建议胶囊、滚动条、选区与动效[class*copilotKitSuggestion]直角描边芯片 等宽大写小字0.75rem、text-transform: uppercasehover 时烬色描边并上浮像一组精编的指令选项滚动条收窄到 4px、直角 thumbhover 变烬色并用scrollbar-width: thin兼容 Firefox::selection浅烬底 烬色文字动效克制仅欢迎屏标题与 eyebrow 做一次 600–700ms 的halcyon-rise淡入上浮错峰 80ms并在prefers-reduced-motion: reduce下完全禁用。自包含性把 theme.css 搬到别的项目也能端到端工作主题文件顶部通过import从 Google Fonts 加载 Fraunces / Instrument Serif / Inter Tight / JetBrains Monotheme.css字体、token、全部组件样式都收敛在单文件内。README 明确给出复用承诺把theme.css复制进另一个项目主题即可端到端生效。复制时需要保持两点不变根命名空间仍为.chat-css-demo-scope或在你的容器元素上换成自己的 scope 类并同步替换所有选择器前缀[data-copilotkit]token 覆盖必须位于你页面能级联到的祖先作用域下。什么时候用 CSS、什么时候用 slotsREADME 给出了清晰的分工边界这也是本演示与 chat-slots 演示的对照关系需要改变某个部件渲染成什么结构层面例如把默认消息换成卡片组件、注入自定义欢迎内容→ 使用 slots见chat-slots演示的 slot 覆盖用法默认结构没问题、只需要不同的视觉身份配色、字体、圆角、间距、细节装饰→ 使用 CSS即本演示的路线。两者互补而非互斥token 覆盖负责全局换肤class 定向负责结构内的精修slot 负责换结构。对大多数品牌定制需求CSS 路线已经足够且不引入任何组件维护成本。从 HALCYON 出发定制自己品牌的四步清单定调色板仿照--halcyon-*定义 34 组语义色纸面/墨色/强调/弱化强调色务必克制使用才能保持信号感映射 v2 token在[data-copilotkit]上把--background/--foreground/--primary/--muted/--border/--ring/--radius等指向你的 token——这一步自动重绘所有cpk:*utility补 class 层按需覆盖.copilotKitChat、.copilotKitMessage.copilotKitUserMessage、.copilotKitMessage.copilotKitAssistantMessage、.copilotKitInput、欢迎屏与建议等表达变量表达不了的版式细节加 scope 与自包含所有选择器挂在唯一命名空间下防止泄漏字体用import内联进样式文件保证复制即用。需要更深入地了解 v2 组件的默认结构与可选类名时可直接查阅packages/react-core/src/v2/components/chat/下的 CopilotChatView.tsx、CopilotChatInput.tsx 与 CopilotChatMessageView.tsx对照data-copilotkit注入点与data-testid锚点就能把任何新组件接进同一套皮肤体系。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/13 14:30:11 · 阅读 1.2k 纯 CSS 重塑 CopilotChat 品牌视觉：CopilotKit HALCYON 主题定制实战
纯 CSS 重塑 CopilotChat 品牌视觉CopilotKit HALCYON 主题定制实战【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKitCopilotKit 的预置组件CopilotChat提供了一套可开箱即用的聊天 UI其默认样式为圆角、系统无衬线字体、极简浅色。本文基于仓库中showcase/integrations/crewai-crews的chat-customization-css示例README.md完整讲解如何不编写任何 React 组件、不覆盖任何 slot、不改动一行组件源码仅凭一份theme.css将CopilotChat从默认外观整体重绘为 HALCYON 温暖纸感编辑部风格——奶油羊皮纸表面、直角几何、铜烬色点缀、展示衬线与等宽字体混排。读完本文你将掌握 CopilotKit v2 主题定制的两层核心机制v2 token 变量覆盖 class 定向样式并能在自己的项目中复刻出一套自包含、可整体搬移的品牌皮肤。演示要回答的问题CSS 能把 CopilotChat 推到多远chat-customization-css这个演示的核心命题是不开组件文件、不做 slot 覆盖、不引入额外框架仅用 CSS 就能让CopilotChat呈现完全不同的品牌气质。默认外观是圆角 系统无衬线 极简浅色HALCYON 则把它变成奶油羊皮纸表面#F4EFE6左上角一团环境烬色光晕叠加一层几乎不可察觉的内联 SVG 纸张颗粒噪声全局 90° 直角radius 覆盖为0px与默认的圆角胶囊完全相反展示级斜体衬线Instrument Serif用于大标题Fraunces 衬线用于助手正文JetBrains Mono 用于用户消息与元信息深铜烬色#C44A1F仅出现在用户消息标记、助手左侧装饰线、发送按钮与聚焦环上克制使用以保持信号感。文档给出的核心理由很直白一个团队可以把CopilotChat从货架上拿来就用只改样式文件就能匹配自己的品牌而永远不需要打开任何组件文件见 README.md。工作机制两层各司其职HALCYON 主题的落地依赖两层配合在[data-copilotkit]上覆盖 v2 token 变量——--background、--foreground、--primary、--muted、--border、--ring、--radius等。运行时渲染出的所有 Tailwind utilitycpk:bg-muted、cpk:text-foreground…都会自动跟随这些变量变色这一层一改全改。class 定向样式——针对.copilotKitChat、.copilotKitMessages、.copilotKitMessage.copilotKitUserMessage、.copilotKitMessage.copilotKitAssistantMessage、.copilotKitInput、欢迎屏、建议胶囊与滚动条等具体类名补齐纯变量表达不了的编辑部级细节。所有选择器都挂在.chat-css-demo-scope命名空间下因此这套主题不会泄漏到 showcase 的其他页面。为什么[data-copilotkit]是 token 注入点从源码看CopilotKit v2 的每个聊天子组件消息、输入框、建议等根部都会渲染div>use client; import React from react; import { CopilotKit, CopilotChat } from copilotkit/react-core/v2; import ./theme.css; export default function ChatCustomizationCssDemo() { return ( CopilotKit runtimeUrl/api/copilotkit agentchat-customization-css div classNameflex justify-center items-center h-screen w-full bg-white p-6 div classNamechat-css-demo-scope h-full w-full max-w-4xl CopilotChat agentIdchat-customization-css classNameh-full attachments{{ enabled: true }} / /div /div /CopilotKit ); }接线要点CopilotKit通过runtimeUrl/api/copilotkit指向前端 runtime 路由agentchat-customization-css选择后端代理名称CopilotChat被包在div classNamechat-css-demo-scope里主题通过页面顶部的import ./theme.css生效页面不传任何 slot 覆盖属性视觉差异 100% 来自样式表——这正是与 chat-slots 演示形成对照的地方。后端接线agent 名如何解析到真实会话chat-customization-css这个 agent 名称注册在前端 runtime 路由 route.ts 的agentNames列表中且没有显式 override因此解析到默认/chat端点。该端点由 chat_flow.py 中的PromptedChatFlow支撑——它是一条只带提示词的普通助手 Flow无后端工具、无状态变更、无委派。route.ts的注释明确写道只需要普通助手的 cell 共享/chat上的中立 chat Flow因为 CrewAI crew 端点会通过build_system_message无条件注入自我介绍并回到 crew 目标的样板提示反而会污染这类纯样式演示的对话体验。agent_server.py中对应add_crewai_flow_fastapi_endpoint(app, PromptedChatFlow(), /chat)见 agent_server.py。注原 README 描述该 agent backed bygraphinsrc/agents/main.py就当前仓库而言实际的支撑实现是src/agents/chat_flow.py的PromptedChatFlowREADME 中的main.py路径在本仓库中不存在接线以 route.ts 与 chat_flow.py 为准。第一层HALCYON 设计 token 与 v2 token 覆盖主题的调色板与字体仓库定义在.chat-css-demo-scope根上theme.css.chat-css-demo-scope { --halcyon-paper: #f4efe6; /* 主羊皮纸面 */ --halcyon-paper-soft: #ece6d9; /* 次级纸面muted 背景 */ --halcyon-paper-elevated: #fbf8f2;/* 悬浮纸面卡片/主前景 */ --halcyon-card: #ffffff; /* 输入卡片 */ --halcyon-rule: #d6cfbe; /* 分隔线 */ --halcyon-rule-strong: #aea48a; /* 强分隔线 */ --halcyon-ink: #1a1714; /* 主墨色 */ --halcyon-ink-soft: #3d362e; /* 次墨色 */ --halcyon-ink-mute: #7a7468; /* 弱化墨色 */ --halcyon-ember: #c44a1f; /* 深铜烬色品牌强调 */ --halcyon-ember-bright: #e45f2b; /* 亮烬色hover */ --halcyon-ember-soft: #f3d7c5; /* 浅烬色tint 背景 */ --halcyon-champagne: #98794a; /* 香槟金辅助光晕 */ --halcyon-display: Instrument Serif, ui-serif, Iowan Old Style, Georgia, serif; --halcyon-serif: Fraunces, Source Serif Pro, ui-serif, Georgia, Times New Roman, serif; --halcyon-sans: Inter Tight, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; --halcyon-mono: JetBrains Mono, ui-monospace, SF Mono, Menlo, Consolas, monospace; --halcyon-shadow-soft: 0 1px 0 rgba(26, 23, 20, 0.04), 0 12px 32px -18px rgba(26, 23, 20, 0.18); --halcyon-shadow-ember: 0 1px 0 rgba(196, 74, 31, 0.18), 0 14px 36px -16px rgba(196, 74, 31, 0.42); }随后在.chat-css-demo-scope [data-copilotkit]上把这些 token 重新指向 CopilotKit v2 的标准 CSS 变量theme.css.chat-css-demo-scope [data-copilotkit] { --background: var(--halcyon-paper); --foreground: var(--halcyon-ink); --card: var(--halcyon-card); --card-foreground: var(--halcyon-ink); --popover: var(--halcyon-paper-elevated); --popover-foreground: var(--halcyon-ink); --primary: var(--halcyon-ember); --primary-foreground: var(--halcyon-paper-elevated); --secondary: var(--halcyon-paper-soft); --secondary-foreground: var(--halcyon-ink); --muted: var(--halcyon-paper-soft); --muted-foreground: var(--halcyon-ink-mute); --accent: var(--halcyon-ember-soft); --accent-foreground: var(--halcyon-ember); --destructive: #b3361b; --destructive-foreground: var(--halcyon-paper-elevated); --border: var(--halcyon-rule); --input: var(--halcyon-rule); --ring: var(--halcyon-ember); --radius: 0px; /* 全局直角化 */ }这套映射可以直接复用任何一份新品牌主题只需先重定义这十余个变量再按需补 class 层。--radius: 0px一句话就把默认的圆角胶囊全部拉直是直角编辑部这一视觉信号性价比最高的一笔。源码侧印证v2 组件内部大量使用cpk:bg-muted、cpk:text-muted-foreground、cpk:border-border等 utility如 CopilotChatAttachmentRenderer.tsx这些取色全部源自上述变量。第二层class 定向的编辑部细节纯 token 无法表达的细节交给类选择器。以下按组件逐一拆解完整实现见 theme.css。聊天外壳与报头chat shell.chat-css-demo-scope .copilotKitChat承担羊皮纸表面三层背景叠加左上角 900×460px 烬色光晕、右下角香槟色弱光晕、内联 SVGfeTurbulence纸张噪声外加 1px 纸色描边与柔和投影。报头则利用::before伪元素固定一条居中的等宽小标签CopilotChat · Customized with CSSpointer-events: none保证不挡交互且在欢迎态、对话中、清空后的空态都常驻。欢迎屏welcome[data-testidcopilot-welcome-screen]是欢迎屏的稳定锚点源码见 CopilotChatView.tsx。HALCYON 把默认的规整无衬线标题替换为clamp(2.4rem, 5vw, 4rem)的斜体展示衬线近似杂志封面头条h1::before加一行烬色等宽 eyebrow CopilotKith1::after加一条 36px 的短装饰线作为视觉落点。用户消息等宽 CLI 传输风格用户消息外层.copilotKitMessage.copilotKitUserMessage去气泡化透明背景、去边框与阴影真正的样式落到内部带bg-muted子串的 bubble 上v2 源码中用户气泡使用cpk:bg-muted见 CopilotChatInput.tsx 同类取色写法因此用[class*bg-muted]作为稳定钩子。最终呈现为一张悬浮纸卡 左侧 2px 烬色竖条::before注入一个烬色→标记让用户发言读起来像一行 CLI 指令。助手消息刊物编辑部的衬线嗓音助手消息.copilotKitMessage.copilotKitAssistantMessage彻底去气泡透明背景、Fraunces 衬线、max-width: 78ch、左侧 1px 烬色竖线::before像出版物版面而不是聊天泡泡。内部.prose全面接管排版段落行高 1.7开启font-feature-settings: ss01…kern:is(h1,h2,h3,h4)切到斜体展示衬线长回答读起来像结构化文章列表 marker 染成烬色ol数字开启tnumblockquote做成斜体展示衬线 pull-quote前置一个 2.4em 的烬色引号行内code是烬色文字 浅烬色底的微型 chip代码块.prose pre与div[data-streamdowncode-block] pre反转为深墨色卡片配淡米色正文像印在书里的代码摘录链接采用烬色下划线text-decoration-color35% 透明、hover 时加深hr收窄成 64px 居中装饰线。输入区与按钮.copilotKitInput从圆角胶囊拍平成直角卡片白色--halcyon-card底、1px 纸色描边、min-height: 56px:focus-within时边框与阴影切换为烬色并轻微上浮translateY(-1px)textarea与占位符分别以 Inter Tight 与斜体弱化墨色呈现。发送按钮button[data-testidcopilot-send-button]源码位于 CopilotChatInput.tsx是 v2 中chatInputToolbarPrimaryvariant编译出cpk:bg-black cpk:text-white cpk:rounded-full cpk:h-9 cpk:w-9这类 tokenHALCYON 用!important逐项覆盖为烬色方块border-radius: 2px、36×36px并定义了 hover亮烬色 上浮、disabled纸色底、弱化墨字、去阴影与内部 SVG 颜色继承。输入区的其余次按钮add-menu plus、mic、transcribe统一为直角 ghost 方块hover 时染成烬色字 浅烬底。建议胶囊、滚动条、选区与动效[class*copilotKitSuggestion]直角描边芯片 等宽大写小字0.75rem、text-transform: uppercasehover 时烬色描边并上浮像一组精编的指令选项滚动条收窄到 4px、直角 thumbhover 变烬色并用scrollbar-width: thin兼容 Firefox::selection浅烬底 烬色文字动效克制仅欢迎屏标题与 eyebrow 做一次 600–700ms 的halcyon-rise淡入上浮错峰 80ms并在prefers-reduced-motion: reduce下完全禁用。自包含性把 theme.css 搬到别的项目也能端到端工作主题文件顶部通过import从 Google Fonts 加载 Fraunces / Instrument Serif / Inter Tight / JetBrains Monotheme.css字体、token、全部组件样式都收敛在单文件内。README 明确给出复用承诺把theme.css复制进另一个项目主题即可端到端生效。复制时需要保持两点不变根命名空间仍为.chat-css-demo-scope或在你的容器元素上换成自己的 scope 类并同步替换所有选择器前缀[data-copilotkit]token 覆盖必须位于你页面能级联到的祖先作用域下。什么时候用 CSS、什么时候用 slotsREADME 给出了清晰的分工边界这也是本演示与 chat-slots 演示的对照关系需要改变某个部件渲染成什么结构层面例如把默认消息换成卡片组件、注入自定义欢迎内容→ 使用 slots见chat-slots演示的 slot 覆盖用法默认结构没问题、只需要不同的视觉身份配色、字体、圆角、间距、细节装饰→ 使用 CSS即本演示的路线。两者互补而非互斥token 覆盖负责全局换肤class 定向负责结构内的精修slot 负责换结构。对大多数品牌定制需求CSS 路线已经足够且不引入任何组件维护成本。从 HALCYON 出发定制自己品牌的四步清单定调色板仿照--halcyon-*定义 34 组语义色纸面/墨色/强调/弱化强调色务必克制使用才能保持信号感映射 v2 token在[data-copilotkit]上把--background/--foreground/--primary/--muted/--border/--ring/--radius等指向你的 token——这一步自动重绘所有cpk:*utility补 class 层按需覆盖.copilotKitChat、.copilotKitMessage.copilotKitUserMessage、.copilotKitMessage.copilotKitAssistantMessage、.copilotKitInput、欢迎屏与建议等表达变量表达不了的版式细节加 scope 与自包含所有选择器挂在唯一命名空间下防止泄漏字体用import内联进样式文件保证复制即用。需要更深入地了解 v2 组件的默认结构与可选类名时可直接查阅packages/react-core/src/v2/components/chat/下的 CopilotChatView.tsx、CopilotChatInput.tsx 与 CopilotChatMessageView.tsx对照data-copilotkit注入点与data-testid锚点就能把任何新组件接进同一套皮肤体系。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考