如何在最新版@highcharts/react中配置Adaptive theme自适应主题

Highcharts的自适应主题核心是根据环境（如系统深色/浅色模式）动态切换主题配置，在React项目中可通过以下步骤实现：

• 步骤1：定义多套主题配置
  先编写好不同模式下的主题选项，比如浅色和深色模式：

  const lightTheme = {
    colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce'],
    chart: { backgroundColor: '#ffffff' },
    title: { style: { color: '#333333' } },
    tooltip: { backgroundColor: '#f0f0f0', style: { color: '#333' } },
    // 补充其他需要自定义的样式配置，比如图例、坐标轴等
  };
  
  const darkTheme = {
    colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572'],
    chart: { backgroundColor: '#121212' },
    title: { style: { color: '#ffffff' } },
    tooltip: { backgroundColor: '#333', style: { color: '#fff' } },
    // 对应补充深色模式下的其他样式
  };
  

• 步骤2：监听主题变化并动态切换
  在React组件中，通过媒体查询监听系统主题变化，也可添加手动切换按钮：

  import { useEffect, useState } from 'react';
  import Highcharts from 'highcharts';
  import HighchartsReact from '@highcharts/react-official';
  
  function AdaptiveChart() {
    // 初始化时匹配系统当前主题
    const [activeTheme, setActiveTheme] = useState(
      window.matchMedia('(prefers-color-scheme: dark)').matches ? darkTheme : lightTheme
    );
  
    // 监听系统主题切换
    useEffect(() => {
      const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
      const handleThemeChange = (e) => {
        setActiveTheme(e.matches ? darkTheme : lightTheme);
      };
  
      themeQuery.addEventListener('change', handleThemeChange);
      return () => themeQuery.removeEventListener('change', handleThemeChange);
    }, []);
  
    // 手动切换主题的方法（可选）
    const toggleTheme = () => {
      setActiveTheme(prev => prev === lightTheme ? darkTheme : lightTheme);
    };
  
    // 合并主题配置与图表业务配置
    const chartOptions = {
      ...activeTheme,
      series: [{ data: [12, 24, 18, 30, 22] }],
      xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }
      // 其他图表业务配置
    };
  
    return (
      <div>
        <button onClick={toggleTheme}>切换主题</button>
        <HighchartsReact highcharts={Highcharts} options={chartOptions} />
      </div>
    );
  }
  
  export default AdaptiveChart;
  

• 步骤3：注意事项

  • 主题配置需覆盖所有你需要自定义的样式，比如提示框、图例、网格线等细节；
  • 若使用Highcharts扩展模块（如导出、地图），需在主题中补充对应模块的样式配置；
  • 切换主题时，HighchartsReact组件会自动重新渲染，无需额外处理实例销毁逻辑。

如果需要更灵活的自适应规则（比如根据自定义条件切换主题），只需调整activeTheme的判断逻辑即可。

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