为什么CSS变量在图表组件主题切换时不完整？

Highcharts v13 主题失效主因有四：未定义足够 CSS 颜色变量（如 --highcharts-color-10+）、neutral-color 被局部样式硬覆盖、媒体查询未同步重定义整套 palette、JS 动态改变量后未手动重绘图表。

Highcharts v13 的 CSS 变量映射表没对齐

图表颜色没全变，大概率是 --highcharts-color-0 到 --highcharts-color-9 这组变量只改了前几个，但图表实际用了 --highcharts-color-5 或更高索引。Highcharts v13 默认只预设 10 个系列色，但如果你的图表数据有 12 个系列，后两个就会 fallback 到默认灰阶——而你根本没定义 --highcharts-color-10 和 --highcharts-color-11。

实操建议：

1. 检查图表 series 数量，确保 CSS 变量声明覆盖全部索引（比如最多 15 个系列，就至少定义 --highcharts-color-0 到 --highcharts-color-14）
2. 别依赖“自动递增”，Highcharts 不会把 --highcharts-color-0 的值复制到未声明的 --highcharts-color-N
3. 在 :root 中批量声明时，用 CSS 预处理器或 JS 注入更可靠，避免手写漏项

neutral-color 变量被局部样式硬覆盖

--highcharts-neutral-color-100 控制文字、坐标轴标签等，默认应映射到最高对比度文本色。但如果你在组件 scoped 样式里写了 .chart-title { color: #333; }，这个硬编码值会直接压过 color: var(--highcharts-neutral-color-100);，导致主题切换后标题颜色不动。

常见场景：

1. Vue/React 组件中使用内联 style 或 :style 绑定颜色
2. 第三方 UI 库（如 Ant Design Vue）的图表容器加了 !important 规则
3. 全局 reset.css 里重置了 svg text 的 fill，且没用 var() 回退

验证方法：在 DevTools 的 Elements 面板选中一个坐标轴文字，看 Computed → color 的来源是不是来自 var(--highcharts-neutral-color-100)，而不是某个固定色值。

媒体查询里没重定义整套 palette 变量

如果用了 @media (prefers-color-scheme: dark) 自动切暗色，但只改了 --highcharts-background-color，没同步更新 --highcharts-neutral-color-100 和 --highcharts-color-0，图表就会出现“背景黑了，文字还是黑的”或“柱子颜色没变”的情况。

原因在于：var() 是静态取值，媒体查询触发时，浏览器不会重新解析已计算的属性值，除非你显式重定义所有依赖变量。

正确做法：

1. 在媒体查询块内完整重写整套 Highcharts palette 变量，不要只改其中一两个
2. 避免嵌套引用，比如不要让 --highcharts-color-0 依赖 --color-primary，再让 --color-primary 在媒体查询里改——这样链路太长，容易断
3. 用 Chrome 的 Rendering 面板勾选 “Emulate CSS prefers-color-scheme”，快速验证是否所有变量都响应了

JS 注入变量后没触发图表重绘

调用 document.documentElement.style.setProperty('--highcharts-color-0', '#1e40af') 后，Highcharts 实例并不会自动刷新。它只在初始化或 chart.update() 时读一次变量值，之后就缓存了。

这不是 CSS 变量失效，而是图表逻辑没联动：

1. 必须手动调用 chart.redraw() 或 chart.update({}, true) 强制重绘
2. 若页面有多个图表，别漏掉遍历；用 Highcharts.charts 数组统一处理更稳妥
3. 避免在 setInterval 里反复调用 redraw()，性能损耗大；推荐用 MutationObserver 监听 :root style 变化，再触发一次批量 redraw

最易忽略的一点：图表容器如果用了 display: none 或在 tab 切换后才显示，首次渲染时可能读的是旧变量值——得在 visible 后再调一次 redraw()。