使用CSS变量（颜色）搭配Chart.js时，var(--primaryColor)无法生效

这个坑我之前踩过！核心原因是：Chart.js是通过Canvas API渲染图形的，而Canvas绘图上下文（CanvasRenderingContext2D）无法直接读取DOM元素的CSS变量——CSS变量是作用在DOM树节点上的样式规则，Canvas属于独立的绘图环境，不会自动继承或解析这些变量，所以直接写var(--primaryColor)肯定无效。

下面给你几个实用的解决方案，按从简单到进阶的顺序来：

1. 手动读取CSS变量，传递给Chart.js配置 #

最直接的办法是用JS读取当前生效的CSS变量值，然后把这个值硬编码到Chart.js的配置里。

步骤： #

• 用getComputedStyle获取根元素（或目标元素）的计算样式，提取CSS变量值
• 初始化图表时，把颜色配置设为读取到的变量值
• 切换主题后，重新读取变量值，更新图表配置并调用update()方法

示例代码： #

// 1. 封装一个读取CSS变量的工具函数
function getCSSVar(varName) {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(varName)
    .trim(); // 注意去掉多余空格
}

// 2. 初始化Chart.js图表
let myChart;
function initChart() {
  const ctx = document.getElementById('myChart').getContext('2d');
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
        label: 'Data',
        data: [10, 20, 15],
        borderColor: getCSSVar('--primaryColor'), // 用读取到的变量值
        backgroundColor: `${getCSSVar('--primaryColor')}40` // 可添加透明度
      }]
    }
  });
}

// 3. 主题切换按钮的点击事件
document.getElementById('themeToggle').addEventListener('click', () => {
  // 这里是你原来的样式表切换逻辑（比如切换link标签的disabled状态）
  // ...
  
  // 切换后更新图表颜色
  const newPrimaryColor = getCSSVar('--primaryColor');
  myChart.data.datasets[0].borderColor = newPrimaryColor;
  myChart.data.datasets[0].backgroundColor = `${newPrimaryColor}40`;
  myChart.update(); // 触发图表重新渲染
});

// 页面加载时初始化图表
window.addEventListener('load', initChart);

2. 监听样式表变化，自动触发图表更新 #

如果你的样式表切换是通过修改<link>标签的disabled属性实现的，可以监听样式表的load事件，自动触发图表更新，不用在按钮点击里重复写逻辑：

// 假设你的日间/夜间样式表是两个link标签，分别有id
const dayStyle = document.getElementById('dayStyle');
const nightStyle = document.getElementById('nightStyle');

// 监听样式表加载完成事件
[dayStyle, nightStyle].forEach(style => {
  style.addEventListener('load', () => {
    updateChartColors();
  });
});

function updateChartColors() {
  const newPrimaryColor = getCSSVar('--primaryColor');
  myChart.data.datasets.forEach(dataset => {
    dataset.borderColor = newPrimaryColor;
    dataset.backgroundColor = `${newPrimaryColor}40`;
  });
  myChart.update();
}

3. 进阶：批量同步CSS变量到Canvas（适合复杂场景） #

如果你的图表有大量颜色配置需要同步，可以把根元素的CSS变量同步到Canvas元素的样式中，再统一读取，减少重复代码：

// 同步根元素的CSS变量到Canvas
function syncRootVarsToCanvas(canvas) {
  const rootStyles = getComputedStyle(document.documentElement);
  ['--primaryColor', '--secondaryColor', '--textColor'].forEach(varName => {
    canvas.style.setProperty(varName, rootStyles.getPropertyValue(varName));
  });
}

// 读取Canvas上的同步变量
const canvas = document.getElementById('myChart');
syncRootVarsToCanvas(canvas);
const canvasStyles = getComputedStyle(canvas);
const primaryColor = canvasStyles.getPropertyValue('--primaryColor').trim();

不过这个方法本质还是手动同步，一般场景下用第一种方法就足够高效。

内容的提问来源于stack exchange，提问作者Jacob Stahl