Chart.js如何通过按钮切换实现明暗模式下图表颜色动态修改

核心逻辑 #

不需要销毁重建Chart实例，将两套主题的配色抽离为独立配置，切换时更新实例上所有颜色相关配置项，调用update()方法触发重绘即可，性能好且切换动画流畅。

分步实现 #

• 抽离主题配色常量
  不要把颜色硬编码在初始化配置里，单独维护浅色、深色两套配色映射，后续调整配色只需要改这一处：

// 深浅主题配色表，可根据实际设计稿调整色值
const themeConfig = {
  light: {
    barBackground: '#2563eb',
    axisTickText: '#334155',
    yGridLine: '#e2e8f0',
    legendText: '#1e293b',
    chartCanvasBg: '#ffffff'
  },
  dark: {
    barBackground: '#3b82f6',
    axisTickText: '#cbd5e1',
    yGridLine: '#334155',
    legendText: '#f1f5f9',
    chartCanvasBg: '#1e293b'
  }
}

• 封装图表主题更新方法
  写一个通用方法，接收已初始化的Chart实例和目标主题名称，统一更新所有关联元素的颜色配置：

/**
 * 更新柱状图主题
 * @param {Chart} chartInstance 已初始化的Chart.js实例
 * @param {string} theme 目标主题 light/dark
 */
function changeBarChartTheme(chartInstance, theme) {
  const colors = themeConfig[theme];
  // 更新所有数据集的柱体背景色
  chartInstance.data.datasets.forEach(dataset => {
    dataset.backgroundColor = colors.barBackground;
  });
  // 更新X/Y轴刻度文字颜色
  chartInstance.options.scales.x.ticks.color = colors.axisTickText;
  chartInstance.options.scales.y.ticks.color = colors.axisTickText;
  // 更新Y轴网格线颜色
  chartInstance.options.scales.y.grid.color = colors.yGridLine;
  // 更新图例文字颜色
  chartInstance.options.plugins.legend.labels.color = colors.legendText;
  // 更新画布背景色
  chartInstance.canvas.style.backgroundColor = colors.chartCanvasBg;
  // 触发图表重绘，带默认过渡动画
  chartInstance.update();
}

• 绑定复选框切换事件
  监听主题切换复选框的选中状态，同步切换全局页面样式和图表主题：

// 提前初始化好的柱状图实例，替换成你自己的实例变量名
const barChart = new Chart(document.getElementById('barChart'), {
  // 保留你原来的浅色模式初始化配置即可，不需要改动原有逻辑
  type: 'bar',
  data: {/* 你的原有数据 */},
  options: {/* 你的原有浅色模式配置 */}
});

// 绑定复选框切换事件
const themeToggle = document.getElementById('theme-checkbox');
themeToggle.addEventListener('change', (e) => {
  const targetTheme = e.target.checked ? 'dark' : 'light';
  // 给body加深色模式标识，方便适配页面其他非图表元素
  document.body.classList.toggle('dark-mode', e.target.checked);
  // 更新图表主题
  changeBarChartTheme(barChart, targetTheme);
});

• 补充基础CSS适配
  给页面和画布加过渡效果，让主题切换更自然，同时适配深色模式下的页面基础背景：

body {
  margin: 0;
  padding: 2rem;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
body.dark-mode {
  background-color: #0f172a;
}
#barChart {
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

扩展说明 #

如果你的图表配置了tooltip、图表标题、数据标签、X轴网格线等额外元素，只需要在changeBarChartTheme方法里补充对应配置项的颜色赋值即可，所有Chart.js支持的配置项都可以通过实例的options属性动态修改，调用update()后即时生效。
禁止每次切换主题都重新执行new Chart()创建新实例，会造成内存泄漏，且切换时会出现闪烁，直接调用实例上的update()方法是官方推荐的动态更新方案。

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