Kilo 项目 IntelliJ 新 UI 图标调色板（palette.md）全解：浅色/深色主题图标配色的唯一权威来源

本篇指南以 Kilo 开源仓库中 JetBrains 插件图标技能的权威调色板文档 .kilo/skills/icon-jetbrains/palette.md 为核心，系统讲解 IntelliJ New UI 图标的规范化配色体系：为什么必须使用精确十六进制色值、每一组角色（中性灰、蓝/红/绿/橙黄/紫强调色）在浅色与深色主题下的对应关系，以及如何用脚本一键生成 _dark.svg 暗色变体。读完本文，你将掌握为 Kilo 的 JetBrains 插件绘制、审查、批量转换 SVG 图标时所需的全部配色规则，并能在真实图标文件（如 add-small.svg、pr-review-approved.svg）中验证这些规则的落地形态。

为什么 IntelliJ 图标配色必须"按字符串精确匹配"

IntelliJ 的图标引擎在运行时不是通过 CSS、currentColor 或 <style> 块来渲染 SVG 颜色的。正如 packages/kilo-jetbrains/AGENTS.md 中明确记录的：SVGLoader 通过把 fill / stroke 属性中的字面十六进制色值与当前主题调色板做逐字符串匹配来完成换色（详见 packages/kilo-jetbrains/AGENTS.md）。

这带来两条硬性约束：

1. 不允许临时起意使用"一次性"颜色。任何脱离下方调色板的色值（例如从 Figma 直接复制过来的色号）都不会被主题机制识别，导致图标在主题切换后无法正确换色，并在代码评审中被拒绝。
2. 每个形状都必须显式声明 fill / stroke。根 <svg> 上只写 fill="none"，颜色必须逐形状写死为调色板中的精确 hex 字符串。

调色板文档（palette.md）正是为满足这一机制而存在的"唯一真源"（canonical palette）：取色时永远从这张表里取，不要凭空创造新颜色。

如何阅读 Light ↔ Dark 映射表

palette.md 中所有颜色表都遵循同一个阅读约定：

• Light 列：浅色（默认）主题 SVG 文件（如 foo.svg）中使用的颜色。
• Dark 列：与 foo.svg 配对的 _dark 变体（foo_dark.svg）中使用的替换色。
• 生成暗色变体时，必须一次性替换所有浅色颜色，严禁混搭——调色板中的每一对颜色都是为对比度专门调校过的组合，混搭会破坏主题下的可读性。

仓库中的真实示例可以直观印证这一点。对比这对图标：

• add-small.svg（浅色）：fill="#6C707E"
• add-small_dark.svg（暗色）：fill="#CED0D6"

两者路径几何完全一致，只有填充色发生替换——这正是"几何相同、仅换调色板"规则的直接体现。

中性色（Neutrals）：大多数图标只需要这一组

palette.md 明确指出：大多数图标只需要中性色。完整映射如下：

角色	Light	Dark
主笔画 / 主填充（主要图形）	#6C707E	#CED0D6
次级笔画（chevron、浅淡图形）	#818594	#6F737A
三级笔画（极浅淡）	#A8ADBD	#9DA0A8
禁用 / 惰性填充背景	#EBECF0	#43454A
背景底板（罕见）	#F0F1F2	#5A5D63 / #1E1F22
纯白（仅状态图形用）	white	按状态使用对应 muted 色（见下文）

其中 #6C707E ↔ #CED0D6 是全图标集使用频率最高的一对。文档原话强调：如果只想记住一对颜色，记住这对即可。这在仓库中有大量实例佐证——例如会话 UI 的 brain.svg 全部描边使用 #6C707E，其暗色配对 brain_dark.svg 则整体替换为 #CED0D6。

从配套技能文档 .kilo/skills/icon-jetbrains/SKILL.md 可以补充具体的应用规则：

• 纯描边图标（chevron、刷新、编辑铅笔）：使用中性主色 #6C707E（暗色 #CED0D6），stroke-width="1"；下拉箭头等"次级"描边图形使用 #818594（暗色 #6F737A）。
• 禁用 / 纯描边变体（如 *-stroke.svg）：仅描边、无填充，使用相同的中性描边色。
• 严禁使用纯 #000000 或调色板之外的灰色。

强调色——蓝（主要操作、信息、默认节点）

角色	Light	Dark
描边 / 填充	#3574F0	#548AF7
柔和背景填充（节点圆形）	#E7EFFD	#25324D
着色面板填充	#EDF3FF	#25324D
备用蓝（罕见）	#4682FA	#5F93FF

蓝色是 Kilo 图标集中"两色调操作图标"（two-tone action icon）的标准强调色：基础图形使用中性灰，小修饰符（+、✕、↻、齿轮）使用主蓝 #3574F0；暗色变体对应替换为 #548AF7。节点型图标（class / method）的典型写法是"浅色填充圆 + 强调色描边 + 同色填充图形"，例如 class 节点：浅色 fill="#E7EFFD" stroke="#3574F0"，暗色 fill="#25324D" stroke="#548AF7"（完整可运行示例见 examples.md）。

强调色——红（删除、错误节点、断点）

角色	Light	Dark
描边 / 填充	#DB3B4B	#DB5C5C
柔和背景填充	#FFF7F7	#402929
状态徽章填充（错误圆形）	#E55765	#DB5C5C

注意 #DB3B4B（线条 / 强调色）与 #E55765（徽章填充）之间的差异是有意为之：实心的状态圆形徽章比线条强调色略微饱和一点。仓库中的断点标记即为纯色实心圆填充 #E55765 的典型用例（参见 examples.md 的 Breakpoint mark 一节），而 method 节点则沿用 #FFF7F7/#DB3B4B（浅色）→ #402929/#DB5C5C（暗色）的模板。

强调色——绿（运行、成功、版本控制新增）

角色	Light	Dark
描边 / 填充	#208A3C	#57965C
柔和背景填充	#F2FCF3	#253627
状态徽章填充（成功圆形）	#55A76A	#57965C
备用绿（罕见）	#369650	#5FAD65

仓库中的 pr-review-approved.svg 就是一对完美的真实样例：浅色版本用 #208A3C 画成功对勾，暗色版本 pr-review-approved_dark.svg 将其替换为 #57965C，描边风格保持 stroke-linecap="round" + stroke-linejoin="round"。成功状态徽章则是在 #55A76A（浅）/ #57965C（暗）的圆内使用 stroke="white"、stroke-width="2" 的 2px 描边对勾。

强调色——橙 / 黄（警告、已修改、书签）

角色	Light	Dark
橙色描边 / 填充	#E66D17	#C77D55
橙色柔和填充	#FFF4EB	#45322B
警告黄（状态三角形）	#FFAF0F	#F2C55C
警告柔和填充	#FFFAEB / #F7E4CD	#3D3223
深棕 / 金	#C27D04	#D6AE58
警告填充内的暗色图形	不适用（用 white）	#5E4D33

这一组包含整份调色板中最重要的一个"反直觉"规则：浅色主题里"白底黄字"式的 white 图形在暗色主题中完全不可读，因此暗色警告图形必须改用 #5E4D33（深棕色）。这一思路应推广到暗色主题下任何"暖色填充内的暗色图形"场景。

关于这条规则，配套的 examples.md 给出了完整对照：警告徽章暗色变体的三角形用 #F2C55C 填充，内部的感叹号图形用 #5E4D33 而非 white。而对于冷色填充（#3574F0、#208A3C、#DB3B4B），暗色主题下图形仍然保持 white，因为对比度足够。

强调色——紫（注解、特殊 / 预览）

角色	Light	Dark
描边 / 填充	#834DF0	#B589EC
柔和背景填充	#FAF5FF	#2F2936
备用紫（罕见）	不适用	#A571E6

紫色在 Kilo 图标体系中用于注解、特殊标记与预览类图标，映射规则与其它强调色完全一致：浅色 #834DF0 在暗色主题替换为 #B589EC，柔和背景由 #FAF5FF 替换为 #2F2936。

保留 / 工具色（Reserved / Utility）

角色	Light/Dark
圆内图形（浅色状态）	white
空 / 占位	#231F20（避免使用）
工具窗口面板底色（极罕见）	#1E1F22（暗色）
其他仓库专属色调	仅当同族图标已经在用时

palette.md 对"超出调色板"的情况给出了明确的裁决流程：如果你的图标需要表中没有的颜色，先找一个使用了类似颜色的同族图标，直接复用它的精确 hex 字符串；如果没有任何同族图标使用该颜色，那就修改你的设计——不要引入新颜色。

脚本化生成：算法化的浅色→暗色替换表

palette.md 将整份调色板浓缩成一张可直接交给脚本执行的字面量 find-and-replace 映射表，用于从浅色 SVG 自动产出 _dark.svg：

#6C707E -> #CED0D6   primary stroke/fill
#818594 -> #6F737A   secondary stroke
#A8ADBD -> #9DA0A8   tertiary stroke
#EBECF0 -> #43454A   disabled fill

#3574F0 -> #548AF7   blue
#EDF3FF -> #25324D   blue soft
#E7EFFD -> #25324D   blue node fill

#DB3B4B -> #DB5C5C   red
#FFF7F7 -> #402929   red soft
#E55765 -> #DB5C5C   error badge fill

#208A3C -> #57965C   green
#55A76A -> #57965C   success badge fill
#F2FCF3 -> #253627   green soft
#369650 -> #5FAD65   alt green

#E66D17 -> #C77D55   orange
#FFF4EB -> #45322B   orange soft
#FFAF0F -> #F2C55C   warning yellow
#FFFAEB -> #3D3223   warning soft
#F7E4CD -> #3D3223   warning soft alt
#C27D04 -> #D6AE58   gold

#834DF0 -> #B589EC   purple
#FAF5FF -> #2F2936   purple soft

white   -> (status-glyph specific muted dark — see Orange/Yellow section)

使用方式与注意事项：

1. 脚本对浅色 SVG 做字面量查找替换，即可产出 _dark.svg；
2. 替换后必须人工复核所有"白字压暖色"的情况（white 在警告黄、橙等暖色填充上的用法），确认是否需要按 Orange/Yellow 一节的原则改为 muted-dark 图形（如 #5E4D33）；
3. 生成后两个文件的路径几何必须保持逐字节一致，只允许颜色差异——这是技能文档中的最高优先级规则之一，否则主题切换时的选择动画与 HiDPI 叠加层会出现闪烁。

完整生成工作流：从取色到落地

将调色板与技能文档 SKILL.md 结合，一个图标的完整生产流程是：

1. 定角色、定画布：依据 Icon roles 表选择画布尺寸（如操作图标 16×16、工具窗口条 20×20、编辑器 gutter 14×14），并在图标目录中找至少两个视觉相似的同族图标作为参照。
2. 像素网格上排布几何：填充落在整数像素、描边轴线落在半像素（x.5），图形做光学居中而非几何居中。
3. 套用本文的规范化浅色调色板，绝不自行发明颜色。
4. 保存浅色 SVG：width / height / viewBox 与角色匹配，根 <svg> 上 fill="none"。
5. 复制为 _dark 文件，按上文映射表逐一替换颜色，其余内容保持字节一致。
6. 放置并接线：两个文件一起放入 packages/kilo-jetbrains/frontend/src/main/resources/icons/（操作图标、工具窗口图标）或 icons/views/ 子目录（会话 / 聊天界面内图标），然后在插件的 icon-holder 类中通过 IconLoader.getIcon("/icons/foo.svg", MyClass::class.java) 引用（加载方式见 packages/kilo-jetbrains/AGENTS.md）。
7. 双主题目检：在 IDE 中切换 View ▸ Appearance ▸ New UI 对比两个主题下的显示效果，并检查工具窗口条图标的选中态。

需要说明的适用前提：上述配色与命名规则针对 Kilo 仓库 JetBrains 插件自有的 SVG 资源目录；主题本身仍可通过 icons.ColorPalette 在主题 JSON 中覆盖调色板颜色（参见 packages/kilo-jetbrains/AGENTS.md），而运行时 Swing UI 的颜色应始终从主题 API 派生，不适用本调色板。

常见配色错误清单

结合调色板文档与技能文档的 "Common mistakes" 一节，以下错误在图标评审中最常被驳回：

• 使用调色板之外的颜色（例如从 Figma 导入后未重新映射）——主题化必然失败；
• 浅色 / 暗色变体几何不一致——选择动画与 HiDPI 叠加会异常；
• 忘记提供 _dark 变体——浅色主题正常，暗色主题下图标"隐身"；
• 在状态徽章之外使用纯黑 #000 / 纯白 #FFF 填充——会在强调色重着色下失效；
• 暗色暖色徽章内仍用 white 图形——应改用 #5E4D33 之类的 muted-dark 色；
• 把 16×16 的图形不加调整塞进 20×20 画布——工具窗口 / 主工具栏图标需要按 20×20 重新平衡，而非直接复用加空白。

深入阅读

• palette.md——本文主题，完整浅色↔暗色调色板（唯一真源）；
• SKILL.md——配套技能文档：画布尺寸、构图规则、生成工作流与常见错误；
• examples.md——每种图标角色的带注释 SVG 模板；
• packages/kilo-jetbrains/AGENTS.md——JetBrains 插件的仓库级约束与图标加载 / 主题机制说明；
• packages/kilo-jetbrains/frontend/src/main/resources/icons/——插件图标的实际存放目录（含 views/ 子目录），是校验配色落地的第一现场。