Chart.js v3/v4 主题切换：更新图表实例与轴样式指南

Chart.helpers.each(Chart.instances, function(instance){
    instance.chart.update(); // 这会导致 TypeError
});

Chart.helpers.each(Chart.instances, function(instance){
    instance.update(); // 正确的更新方式
});

function applyThemeToCharts(isDarkMode) {
  // 根据主题设置全局默认颜色，这会影响图表的大部分文本颜色
  Chart.defaults.color = isDarkMode ? 'white' : 'black';

  // 遍历所有 Chart.js 实例并更新其配置
  Chart.helpers.each(Chart.instances, function(instance) {
    // 遍历图表配置中的每个轴（x轴、y轴等）
    for (let scaleId in instance.config.options.scales) {
      const scale = instance.config.options.scales[scaleId];

      if (isDarkMode) {
        // 深色模式配置
        scale.grid.color = 'white'; // 网格线颜色
        scale.grid.borderColor = 'white'; // 网格边框颜色
        scale.ticks.color = 'white'; // 刻度标签颜色
      } else {
        // 浅色模式配置
        scale.grid.color = 'rgba(0, 0, 0, 0.1)'; // 网格线颜色
        scale.grid.borderColor = 'rgba(0, 0, 0, 0.1)'; // 网格边框颜色
        scale.ticks.color = 'black'; // 刻度标签颜色
      }
    }
    // 更新图表以应用新的配置
    instance.update();
  });
}

// 获取主题切换按钮和图标
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleBtn = document.getElementById('theme-toggle');

// 辅助函数：判断当前是否为深色模式
function isCurrentThemeDark() {
  return localStorage.getItem('color-theme') === 'dark' || 
         (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
}

// 初始化主题
function initializeTheme() {
  const isDark = isCurrentThemeDark();
  if (isDark) {
    document.documentElement.classList.add('dark');
    themeToggleLightIcon.classList.remove('hidden');
    themeToggleDarkIcon.classList.add('hidden'); // 确保另一个图标隐藏
  } else {
    document.documentElement.classList.remove('dark');
    themeToggleDarkIcon.classList.remove('hidden');
    themeToggleLightIcon.classList.add('hidden'); // 确保另一个图标隐藏
  }
  applyThemeToCharts(isDark); // 应用主题到所有图表
}

// 首次加载时调用
initializeTheme();

// 监听主题切换按钮点击事件
themeToggleBtn.addEventListener('click', function() {
  // 切换图标显示
  themeToggleDarkIcon.classList.toggle('hidden');
  themeToggleLightIcon.classList.toggle('hidden');

  let newThemeIsDark;

  // 根据当前状态切换主题并更新 localStorage
  if (localStorage.getItem('color-theme')) {
    if (localStorage.getItem('color-theme') === 'light') {
      document.documentElement.classList.add('dark');
      localStorage.setItem('color-theme', 'dark');
      newThemeIsDark = true;
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('color-theme', 'light');
      newThemeIsDark = false;
    }
  } else { // 如果之前未设置
    if (document.documentElement.classList.contains('dark')) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('color-theme', 'light');
      newThemeIsDark = false;
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('color-theme', 'dark');
      newThemeIsDark = true;
    }
  }

  // 应用新的主题到所有图表
  applyThemeToCharts(newThemeIsDark);
});

// 上文提到的 applyThemeToCharts 函数定义
function applyThemeToCharts(isDarkMode) {
  Chart.defaults.color = isDarkMode ? 'white' : 'black';

  Chart.helpers.each(Chart.instances, function(instance) {
    for (let scaleId in instance.config.options.scales) {
      const scale = instance.config.options.scales[scaleId];

      if (isDarkMode) {
        scale.grid.color = 'white';
        scale.grid.borderColor = 'white';
        scale.ticks.color = 'white';
      } else {
        scale.grid.color = 'rgba(0, 0, 0, 0.1)';
        scale.grid.borderColor = 'rgba(0, 0, 0, 0.1)';
        scale.ticks.color = 'black';
      }
    }
    instance.update();
  });
}