配置指南
主题
使用 light / dark 主题并覆盖 token
theme 可以传字符串，也可以传覆盖 token 的对象。
使用预设
theme: 'light';theme: 'dark';覆盖 token
theme: {
type: 'light',
canvasBackground: '#f7f8fa',
nodeFill: '#1783FF',
edgeStroke: '#d9d9d9',
edgeLineWidth: 2,
}常用 token：
| token | 说明 |
|---|---|
canvasBackground | 画布背景 |
nodeFill | 默认节点填充 |
nodeSize | 默认节点尺寸 |
nodeStroke / nodeStrokeWidth | 默认节点描边 |
edgeStroke / edgeLineWidth | 默认边样式 |
edgeArrow | 默认箭头样式 |
nodeStateStyles | 节点状态样式 |
edgeStateStyles | 边状态样式 |
优先级
元素配置优先级高于主题 token：
new Graph({
theme: { type: 'light', nodeFill: '#1783FF' },
node: {
style: { fill: '#61DDAA' },
},
});上例中节点会使用 node.style.fill。
默认视觉
未传 theme 时使用 light 预设。当前预设遵循以下语义：
- 默认节点尺寸为
24，主色为 AntV#1783FF。 - light 画布为白色，边使用低对比度蓝灰色；dark 画布为
#1a1a1a，边使用更亮的蓝灰色。 active、selected、highlight使用强调色、描边或 halo 表达，不改变节点尺寸和基础边宽。inactive、disabled通过透明度弱化，仍保留上下文关系。- 标签属于按需配置能力；设置
node.style.label或edge.style.label后才会绘制。
可在 默认主题与交互状态 中并排检查 light、dark 和六种内置状态。