Kilo 项目 IntelliJ 新 UI 图标调色板palette.md全解浅色/深色主题图标配色的唯一权威来源【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本篇指南以 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。这带来两条硬性约束不允许临时起意使用一次性颜色。任何脱离下方调色板的色值例如从 Figma 直接复制过来的色号都不会被主题机制识别导致图标在主题切换后无法正确换色并在代码评审中被拒绝。每个形状都必须显式声明fill/stroke。根svg上只写fillnone颜色必须逐形状写死为调色板中的精确 hex 字符串。调色板文档palette.md正是为满足这一机制而存在的唯一真源canonical palette取色时永远从这张表里取不要凭空创造新颜色。如何阅读 Light ↔ Dark 映射表palette.md 中所有颜色表都遵循同一个阅读约定Light 列浅色默认主题 SVG 文件如foo.svg中使用的颜色。Dark 列与foo.svg配对的_dark变体foo_dark.svg中使用的替换色。生成暗色变体时必须一次性替换所有浅色颜色严禁混搭——调色板中的每一对颜色都是为对比度专门调校过的组合混搭会破坏主题下的可读性。仓库中的真实示例可以直观印证这一点。对比这对图标add-small.svg浅色fill#6C707Eadd-small_dark.svg暗色fill#CED0D6两者路径几何完全一致只有填充色发生替换——这正是几何相同、仅换调色板规则的直接体现。中性色Neutrals大多数图标只需要这一组palette.md 明确指出大多数图标只需要中性色。完整映射如下角色LightDark主笔画 / 主填充主要图形#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暗色#CED0D6stroke-width1下拉箭头等次级描边图形使用#818594暗色#6F737A。禁用 / 纯描边变体如*-stroke.svg仅描边、无填充使用相同的中性描边色。严禁使用纯#000000或调色板之外的灰色。强调色——蓝主要操作、信息、默认节点角色LightDark描边 / 填充#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。强调色——红删除、错误节点、断点角色LightDark描边 / 填充#DB3B4B#DB5C5C柔和背景填充#FFF7F7#402929状态徽章填充错误圆形#E55765#DB5C5C注意#DB3B4B线条 / 强调色与#E55765徽章填充之间的差异是有意为之实心的状态圆形徽章比线条强调色略微饱和一点。仓库中的断点标记即为纯色实心圆填充#E55765的典型用例参见 examples.md 的 Breakpoint mark 一节而 method 节点则沿用#FFF7F7/#DB3B4B浅色→#402929/#DB5C5C暗色的模板。强调色——绿运行、成功、版本控制新增角色LightDark描边 / 填充#208A3C#57965C柔和背景填充#F2FCF3#253627状态徽章填充成功圆形#55A76A#57965C备用绿罕见#369650#5FAD65仓库中的 pr-review-approved.svg 就是一对完美的真实样例浅色版本用#208A3C画成功对勾暗色版本 pr-review-approved_dark.svg 将其替换为#57965C描边风格保持stroke-linecaproundstroke-linejoinround。成功状态徽章则是在#55A76A浅/#57965C暗的圆内使用strokewhite、stroke-width2的 2px 描边对勾。强调色——橙 / 黄警告、已修改、书签角色LightDark橙色描边 / 填充#E66D17#C77D55橙色柔和填充#FFF4EB#45322B警告黄状态三角形#FFAF0F#F2C55C警告柔和填充#FFFAEB/#F7E4CD#3D3223深棕 / 金#C27D04#D6AE58警告填充内的暗色图形不适用用white#5E4D33这一组包含整份调色板中最重要的一个反直觉规则浅色主题里白底黄字式的white图形在暗色主题中完全不可读因此暗色警告图形必须改用#5E4D33深棕色。这一思路应推广到暗色主题下任何暖色填充内的暗色图形场景。关于这条规则配套的 examples.md 给出了完整对照警告徽章暗色变体的三角形用#F2C55C填充内部的感叹号图形用#5E4D33而非white。而对于冷色填充#3574F0、#208A3C、#DB3B4B暗色主题下图形仍然保持white因为对比度足够。强调色——紫注解、特殊 / 预览角色LightDark描边 / 填充#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)使用方式与注意事项脚本对浅色 SVG 做字面量查找替换即可产出_dark.svg替换后必须人工复核所有白字压暖色的情况white在警告黄、橙等暖色填充上的用法确认是否需要按 Orange/Yellow 一节的原则改为 muted-dark 图形如#5E4D33生成后两个文件的路径几何必须保持逐字节一致只允许颜色差异——这是技能文档中的最高优先级规则之一否则主题切换时的选择动画与 HiDPI 叠加层会出现闪烁。完整生成工作流从取色到落地将调色板与技能文档 SKILL.md 结合一个图标的完整生产流程是定角色、定画布依据 Icon roles 表选择画布尺寸如操作图标 16×16、工具窗口条 20×20、编辑器 gutter 14×14并在图标目录中找至少两个视觉相似的同族图标作为参照。像素网格上排布几何填充落在整数像素、描边轴线落在半像素x.5图形做光学居中而非几何居中。套用本文的规范化浅色调色板绝不自行发明颜色。保存浅色 SVGwidth/height/viewBox与角色匹配根svg上fillnone。复制为_dark文件按上文映射表逐一替换颜色其余内容保持字节一致。放置并接线两个文件一起放入 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。双主题目检在 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/子目录是校验配色落地的第一现场。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Kilo 项目 IntelliJ 新 UI 图标调色板（palette.md）全解：浅色/深色主题图标配色的唯一权威来源
Kilo 项目 IntelliJ 新 UI 图标调色板palette.md全解浅色/深色主题图标配色的唯一权威来源【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本篇指南以 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。这带来两条硬性约束不允许临时起意使用一次性颜色。任何脱离下方调色板的色值例如从 Figma 直接复制过来的色号都不会被主题机制识别导致图标在主题切换后无法正确换色并在代码评审中被拒绝。每个形状都必须显式声明fill/stroke。根svg上只写fillnone颜色必须逐形状写死为调色板中的精确 hex 字符串。调色板文档palette.md正是为满足这一机制而存在的唯一真源canonical palette取色时永远从这张表里取不要凭空创造新颜色。如何阅读 Light ↔ Dark 映射表palette.md 中所有颜色表都遵循同一个阅读约定Light 列浅色默认主题 SVG 文件如foo.svg中使用的颜色。Dark 列与foo.svg配对的_dark变体foo_dark.svg中使用的替换色。生成暗色变体时必须一次性替换所有浅色颜色严禁混搭——调色板中的每一对颜色都是为对比度专门调校过的组合混搭会破坏主题下的可读性。仓库中的真实示例可以直观印证这一点。对比这对图标add-small.svg浅色fill#6C707Eadd-small_dark.svg暗色fill#CED0D6两者路径几何完全一致只有填充色发生替换——这正是几何相同、仅换调色板规则的直接体现。中性色Neutrals大多数图标只需要这一组palette.md 明确指出大多数图标只需要中性色。完整映射如下角色LightDark主笔画 / 主填充主要图形#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暗色#CED0D6stroke-width1下拉箭头等次级描边图形使用#818594暗色#6F737A。禁用 / 纯描边变体如*-stroke.svg仅描边、无填充使用相同的中性描边色。严禁使用纯#000000或调色板之外的灰色。强调色——蓝主要操作、信息、默认节点角色LightDark描边 / 填充#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。强调色——红删除、错误节点、断点角色LightDark描边 / 填充#DB3B4B#DB5C5C柔和背景填充#FFF7F7#402929状态徽章填充错误圆形#E55765#DB5C5C注意#DB3B4B线条 / 强调色与#E55765徽章填充之间的差异是有意为之实心的状态圆形徽章比线条强调色略微饱和一点。仓库中的断点标记即为纯色实心圆填充#E55765的典型用例参见 examples.md 的 Breakpoint mark 一节而 method 节点则沿用#FFF7F7/#DB3B4B浅色→#402929/#DB5C5C暗色的模板。强调色——绿运行、成功、版本控制新增角色LightDark描边 / 填充#208A3C#57965C柔和背景填充#F2FCF3#253627状态徽章填充成功圆形#55A76A#57965C备用绿罕见#369650#5FAD65仓库中的 pr-review-approved.svg 就是一对完美的真实样例浅色版本用#208A3C画成功对勾暗色版本 pr-review-approved_dark.svg 将其替换为#57965C描边风格保持stroke-linecaproundstroke-linejoinround。成功状态徽章则是在#55A76A浅/#57965C暗的圆内使用strokewhite、stroke-width2的 2px 描边对勾。强调色——橙 / 黄警告、已修改、书签角色LightDark橙色描边 / 填充#E66D17#C77D55橙色柔和填充#FFF4EB#45322B警告黄状态三角形#FFAF0F#F2C55C警告柔和填充#FFFAEB/#F7E4CD#3D3223深棕 / 金#C27D04#D6AE58警告填充内的暗色图形不适用用white#5E4D33这一组包含整份调色板中最重要的一个反直觉规则浅色主题里白底黄字式的white图形在暗色主题中完全不可读因此暗色警告图形必须改用#5E4D33深棕色。这一思路应推广到暗色主题下任何暖色填充内的暗色图形场景。关于这条规则配套的 examples.md 给出了完整对照警告徽章暗色变体的三角形用#F2C55C填充内部的感叹号图形用#5E4D33而非white。而对于冷色填充#3574F0、#208A3C、#DB3B4B暗色主题下图形仍然保持white因为对比度足够。强调色——紫注解、特殊 / 预览角色LightDark描边 / 填充#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)使用方式与注意事项脚本对浅色 SVG 做字面量查找替换即可产出_dark.svg替换后必须人工复核所有白字压暖色的情况white在警告黄、橙等暖色填充上的用法确认是否需要按 Orange/Yellow 一节的原则改为 muted-dark 图形如#5E4D33生成后两个文件的路径几何必须保持逐字节一致只允许颜色差异——这是技能文档中的最高优先级规则之一否则主题切换时的选择动画与 HiDPI 叠加层会出现闪烁。完整生成工作流从取色到落地将调色板与技能文档 SKILL.md 结合一个图标的完整生产流程是定角色、定画布依据 Icon roles 表选择画布尺寸如操作图标 16×16、工具窗口条 20×20、编辑器 gutter 14×14并在图标目录中找至少两个视觉相似的同族图标作为参照。像素网格上排布几何填充落在整数像素、描边轴线落在半像素x.5图形做光学居中而非几何居中。套用本文的规范化浅色调色板绝不自行发明颜色。保存浅色 SVGwidth/height/viewBox与角色匹配根svg上fillnone。复制为_dark文件按上文映射表逐一替换颜色其余内容保持字节一致。放置并接线两个文件一起放入 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。双主题目检在 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/子目录是校验配色落地的第一现场。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考