Chart.js v3/v4 主题切换：高效更新图表实例与颜色配置指南

// Chart.js v3/v4 中遍历并更新所有图表实例的正确方式
Chart.helpers.each(Chart.instances, function(instance){
    instance.update(); // 直接调用实例的 update 方法
});

// 假设 isDarkMode 为 true 表示当前是暗黑模式
if (isDarkMode) {
    for (let scaleId in instance.config.options.scales) {
        const scale = instance.config.options.scales[scaleId];
        // 更新轴线网格颜色和边框颜色
        if (scale.grid) {
            scale.grid.color = 'white';
            scale.grid.borderColor = 'white';
        }
        // 更新轴线刻度标签颜色
        if (scale.ticks) {
            scale.ticks.color = 'white';
        }
    }
} else {
    // 亮色模式下的颜色设置
    for (let scaleId in instance.config.options.scales) {
        const scale = instance.config.options.scales[scaleId];
        if (scale.grid) {
            scale.grid.color = 'rgba(0, 0, 0, 0.1)'; // 亮色模式下的网格颜色
            scale.grid.borderColor = 'rgba(0, 0, 0, 0.1)'; // 亮色模式下的边框颜色
        }
        if (scale.ticks) {
            scale.ticks.color = 'black'; // 亮色模式下的刻度标签颜色
        }
    }
}

/**
 * 根据主题设置更新页面样式和所有 Chart.js 图表。
 * @param {boolean} darkTheme - 是否启用暗黑主题。
 */
function applyThemeToCharts(darkTheme) {
  // 1. 更新文档根元素或body的class以切换全局CSS主题
  if (darkTheme) {
    document.documentElement.classList.add('dark'); // 或 document.body.classList.add('dark-theme');
    localStorage.setItem('color-theme', 'dark');
  } else {
    document.documentElement.classList.remove('dark'); // 或 document.body.classList.remove('dark-theme');
    localStorage.setItem('color-theme', 'light');
  }

  // 2. 更新 Chart.js 的全局默认颜色（适用于非轴线文本、图例、工具提示等）
  Chart.defaults.color = darkTheme ? 'white' : 'black';

  // 3. 遍历所有 Chart.js 实例并更新其特定颜色配置
  Chart.helpers.each(Chart.instances, function (instance) {
    if (darkTheme) {
      for (let scaleId in instance.config.options.scales) {
        const scale = instance.config.options.scales[scaleId];
        if (scale.grid) {
          scale.grid.color = 'white';
          scale.grid.borderColor = 'white';
        }
        if (scale.ticks) {
          scale.ticks.color = 'white';
        }
      }
    } else {
      for (let scaleId in instance.config.options.scales) {
        const scale = instance.config.options.scales[scaleId];
        if (scale.grid) {
          scale.grid.color = 'rgba(0, 0, 0, 0.1)';
          scale.grid.borderColor = 'rgba(0, 0, 0, 0.1)';
        }
        if (scale.ticks) {
          scale.ticks.color = 'black';
        }
      }
    }
    // 强制更新图表以应用所有配置更改
    instance.update();
  });
}