颜色

使用 EntityColor 系统为标签、状态和智能标签配置颜色

标签、状态和智能标签支持通过 EntityColor 类型配置颜色。颜色可以参考主题的设计系统（根据亮/暗模式自动适应），也可以指定明确的自定义值。

EntityColor 类型#

实体配置中的 color 字段接受两种形式：

系统颜色#

通过名称引用 5 个设计系统颜色之一。这些映射到你的主题定义的 CSS 变量，因此它们会自动适应亮暗模式。

{
"color": "accent"
}

可用的系统颜色名称：

带不透明度的系统颜色#

在任意系统颜色名称后追加 /{opacity}，其中不透明度为 0-100：

{
"color": "foreground/50"
}

这会呈现为系统颜色的半透明版本。适用于静音或辅助状态。更多示例：

• "accent/80" — 80% 不透明度强调色
• "destructive/60" — 60% 不透明度红色
• "foreground/30" — 非常柔和的文本颜色

自定义颜色#

使用包含 light 和（可选）dark 的对象指定明确的 CSS 颜色值：

{
"color": {
"light": "#EF4444",
"dark": "#F87171"
}
}

如果省略了 dark，将从 light 自动推导：

• 十六进制颜色：通过混合 30% 的白色来提亮
• 其他格式（OKLCH、RGB、HSL）：按原样使用 — 对于最佳效果，请明确指定 dark

{
"color": {
"light": "#3B82F6"
}
}

颜色格式#

自定义颜色接受任何有效的 CSS 颜色格式：

建议：使用 OKLCH 可获得感知上更均匀的颜色。对于简单情况，带自动推导暗色的十六进制颜色效果良好。

颜色使用场景#

标签#

标签呈现为彩色圆点。color 字段控制圆点颜色：

{
"id": "bug",
"name": "Bug",
"color": "destructive"
}

{
"id": "feature",
"name": "Feature",
"color": {
"light": "#8B5CF6",
"dark": "#A78BFA"
}
}

未设置 color 字段的标签会呈现为静音的前景圆点。

状态#

状态的图标和视觉指示使用颜色：

{
"id": "in-progress",
"label": "In Progress",
"color": "success",
"category": "open"
}

默认状态颜色（未指定 color 时应用）：

智能标签#

智能标签支持 color 字段：

{
"id": "smart-error",
"name": "ERROR",
"color": "destructive",
"expression": "hasError == true"
}

与主题的关系#

系统颜色（accent、info、success、destructive、foreground）引用与你的主题定义相同的 CSS 变量。这意味着：

• 实体颜色在切换主题时会自动适应
• 使用 "color": "accent" 的状态在默认主题下是紫色，但如果你将 accent 改为蓝色则会变成蓝色
• 自定义颜色（{ light, dark }）独立于主题

OKLCH 参考#

使用 OKLCH 格式的自定义颜色：oklch(lightness chroma hue)

常见色相：

• 红： ~25
• 橙： ~70
• 黄： ~100
• 绿： ~145
• 青： ~195
• 蓝： ~250
• 紫： ~293
• 粉： ~330

示例#

最简 — 系统颜色#

{ "color": "success" }

静音状态#

{ "color": "foreground/40" }

带明确暗色变体的品牌色#

{
"color": {
"light": "oklch(0.55 0.20 250)",
"dark": "oklch(0.70 0.18 250)"
}
}

带自动推导暗模式的十六进制#

{
"color": {
"light": "#059669"
}
}

提示#

从系统颜色开始

系统颜色是最简单的选项——它们会自动适应主题和模式。仅在需要特定品牌色或系统颜色无法覆盖的色调时使用自定义颜色。

使用不透明度建立层级

foreground/50 和 foreground/30 非常适合静音、辅助或禁用状态，而无需引入新颜色。

在两种模式下测试

如果使用自定义颜色，请始终在亮/暗模式下检查外观。对于非十六进制格式，最好明确指定 dark 值。

颜色未生效？

• 确保 color 字段在实体配置的顶层（而非嵌套）
• 系统颜色名称区分大小写：使用 "accent" 而非 "Accent"
• 不透明度必须为 0–100（不是 0–1）：使用 "foreground/50" 而非 "foreground/0.5"
• 自定义颜色对象至少需要 light 字段