如何动态刷新Chart.js数据集背景色适配深色模式切换

你初始化Chart实例时，数据集里的backgroundColor存的是代码运行当下读取到的CSS变量静态值，不是和CSS变量联动的动态引用。直接调用myChart.update()时，Chart.js只会读取已缓存的旧配置重绘，不会主动重新拉取CSS变量的最新值，自然不会同步配色。

把读取主题色的逻辑抽成可复用方法，在主题切换的回调里先重新读取最新色值、更新到数据集配置，再调用update()触发重绘即可。

修正后的完整JS代码如下，CSS和HTML部分不需要改动：

const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
];

// 抽离公共方法，统一读取当前主题下的配色
const getCurrentThemeColors = () => [
    getComputedStyle(document.documentElement).getPropertyValue('--color1').trim(),
    getComputedStyle(document.documentElement).getPropertyValue('--color2').trim(),
    getComputedStyle(document.documentElement).getPropertyValue('--color3').trim()
]

const data = {
    labels: labels,
    datasets: [{
        label: 'My First dataset',
        data: [29, 45, 26],
        backgroundColor: getCurrentThemeColors()
    }]
};

const config = {
    type: 'bar',
    data: data
};
  
const myChart = new Chart(
    document.getElementById('myChart'),
    config
);
  
  
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    // 更新数据集的背景色配置为最新主题色
    myChart.data.datasets[0].backgroundColor = getCurrentThemeColors();
    // 触发图表重绘
    myChart.update();
});

如果你的图表还有边框色、坐标轴字体色、网格线颜色等其他跟随主题变化的配置，用同样的逻辑，在切换回调里更新对应配置项后再调用update()就能生效。

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