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。
实操建议：
- 检查图表 series 数量，确保 CSS 变量声明覆盖全部索引（比如最多 15 个系列，就至少定义
--highcharts-color-0到--highcharts-color-14） - 别依赖“自动递增”，Highcharts 不会把
--highcharts-color-0的值复制到未声明的--highcharts-color-N - 在
:root中批量声明时，用 CSS 预处理器或 JS 注入更可靠，避免手写漏项
neutral-color 变量被局部样式硬覆盖
--highcharts-neutral-color-100 控制文字、坐标轴标签等，默认应映射到最高对比度文本色。但如果你在组件 scoped 样式里写了 .chart-title { color: #333; }，这个硬编码值会直接压过 color: var(--highcharts-neutral-color-100);，导致主题切换后标题颜色不动。
常见场景：
- Vue/React 组件中使用内联
style或:style绑定颜色 - 第三方 UI 库（如 Ant Design Vue）的图表容器加了
!important规则 - 全局 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() 是静态取值，媒体查询触发时，浏览器不会重新解析已计算的属性值，除非你显式重定义所有依赖变量。
正确做法：
- 在媒体查询块内完整重写整套 Highcharts palette 变量，不要只改其中一两个
- 避免嵌套引用，比如不要让
--highcharts-color-0依赖--color-primary，再让--color-primary在媒体查询里改——这样链路太长，容易断 - 用 Chrome 的 Rendering 面板勾选 “Emulate CSS prefers-color-scheme”，快速验证是否所有变量都响应了
JS 注入变量后没触发图表重绘
调用 document.documentElement.style.setProperty('--highcharts-color-0', '#1e40af') 后，Highcharts 实例并不会自动刷新。它只在初始化或 chart.update() 时读一次变量值，之后就缓存了。
这不是 CSS 变量失效，而是图表逻辑没联动：
- 必须手动调用
chart.redraw()或chart.update({}, true)强制重绘 - 若页面有多个图表，别漏掉遍历；用
Highcharts.charts数组统一处理更稳妥 - 避免在
setInterval里反复调用redraw()，性能损耗大；推荐用 MutationObserver 监听:rootstyle 变化，再触发一次批量 redraw
最易忽略的一点：图表容器如果用了 display: none 或在 tab 切换后才显示，首次渲染时可能读的是旧变量值——得在 visible 后再调一次 redraw()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
