主题配色
图表默认跟随宿主主题:渲染时从 --ev-* 令牌取色,换主色、切暗色、换肤都自动重绘。需要锁死视觉时用内置色系——options.palette 填一个色系 id,整图系列色立即固定:之后宿主改样式变量、换主色都不再影响这张图;明暗两套色值由色系自带,随暗色模式换挡。
一键试色
点按钮即切色系,「跟随主题」恢复默认的令牌取色。五个系列正好看到色系前五槽的搭配。
当前跟随主题:系列色实时读取令牌,随宿主换肤与暗色自动变化。
选中色系后这张图的配色就固定了——去主题接入里换主色试试,选了色系的图不会跟着变。
色系总览
七套色系按叙事场景选:科技产品选极光,消费营销选落日,人文报告选莫兰迪,健康环保选林间,金融年报选墨蓝,活动大屏选糖果。
经典 · classic当前缺省色板的固化版,品牌蓝锚定;想保住默认观感不随换肤时用极光 · aurora科技 SaaS / 数据产品——冷调现代,蓝绿紫主打的仪表盘观感落日 · sunset消费零售 / 生活方式 / 营销复盘——暖橙珊瑚主导,热情有温度莫兰迪 · morandi人文 / 咨询报告 / 印刷排版——低饱和灰调,长文配图不抢字林间 · forest健康 / 环保 / 农业供应链——自然绿主导,ESG 与可持续叙事墨蓝 · ink金融 / 政企 / 严肃年报——克制深稳,深蓝为骨、暖色点缀糖果 · candy营销活动 / 年轻品牌 / 大屏展示——高饱和明快,视觉抓人优先级与固定边界
- 取色优先级:
theme.colors(手工数组,最高)>palette(内置色系,固定)> 令牌跟随(默认); palette固定的是数据系列色:网格线、轴文字、标题等结构色仍随宿主明暗,保证任何背景下可读;个别元素要钉死可用theme显式覆写;- 每套色系自带浅 / 暗两组(暗色同色相提亮),换挡由图表内部完成,不依赖宿主变量;
- 用 AI 生成时,需求里写明「固定配色 / 不随主题变化」即会带上色系选项。
API
主题配色
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| palette | 内置色系 id,整图固定该色系的系列色(classic / aurora / sunset / morandi / forest / ink / candy);生效后不再读取 --ev-color-* 令牌,与 theme.colors 同设时以 theme.colors 为准 | string | — |
| CHART_PALETTES | 色系注册表:[{ id, name, scene, light[8], dark[8] }],宿主可据此生成换色菜单 | Palette[] | — |
| resolveChartPalette | 按 id 与明暗态取 8 槽色值:resolveChartPalette(id, isDark),未知 id 返回 null | (id, isDark) => string[] | null | — |