ApexChart切换theme.mode时颜色异常：切回浅色模式Y轴文字消失

使用Angular 15 + Tailwind，自定义主题检测服务可正常识别深色/浅色模式。尝试通过修改chartOptions.theme.mode切换ApexChart主题，使用Lodash做对象拷贝。从浅色切深色时图表颜色正常变化，但切回浅色模式后，Y轴标签文字的fill属性仍为浅色，在浅色背景下完全看不见。

相关代码 #

主题切换逻辑 #

ngOnInit(): void {
    this.themeService.themeChange.subscribe((isDarkTheme) => {
        if (isDarkTheme) {
            const theme = this.chartOptions.theme;
            this.chartOptions = {
                ...this.chartOptions,
                theme: {
                    ...theme,
                    mode: 'dark',
                },
            };                
        } else {
            const theme = this.chartOptions.theme;
            this.chartOptions = {
                ...this.chartOptions,
                theme: {
                    ...theme,
                    mode: 'light',
                },
            };       
        }
        console.log(this.chartOptions);
    });
}

初始chartOptions配置 #

this.chartOptions = {
      series: [
        {
          name: "distibuted",
          data: [21, 22, 10, 28, 16, 21, 13, 30]
        }
      ],
      chart: {
        height: 350,
        type: "bar",
        events: {
          click: function(chart, w, e) {
            // console.log(chart, w, e)
          }
        }
      },
      theme: { 
        mode: 'light'
      },
      colors: [
        "#008FFB",
        "#00E396",
        "#FEB019",
        "#FF4560",
        "#775DD0",
        "#546E7A",
        "#26a69a",
        "#D10CE8"
      ],
      plotOptions: {
        bar: {
          columnWidth: "45%",
          distributed: true
        }
      },
      dataLabels: {
        enabled: false
      },
      legend: {
        show: false
      },
      grid: {
        show: false
      },
      xaxis: {
        categories: [
          ["John", "Doe"],
          ["Joe", "Smith"],
          ["Jake", "Williams"],
          "Amber",
          ["Peter", "Brown"],
          ["Mary", "Evans"],
          ["David", "Wilson"],
          ["Lily", "Roberts"]
        ],
        labels: {
          style: {
            colors: [
              "#008FFB",
              "#00E396",
              "#FEB019",
              "#FF4560",
              "#775DD0",
              "#546E7A",
              "#26a69a",
              "#D10CE8"
            ],
            fontSize: "12px"
          }
        }
      }
    };

解决方案 #

方案1：基于原始配置重新生成chartOptions #

问题根源是直接在现有chartOptions上修改时，ApexChart内部可能已对Y轴等样式做了隐式修改，这些修改不会随theme.mode切回而自动重置。解决办法是保存一份初始配置副本，每次切换主题时从副本重新构建配置：

// 组件类中先保存初始配置
private baseChartOptions: any;

ngOnInit(): void {
    // 保存初始配置的深拷贝（用Lodash的cloneDeep确保完全独立）
    this.baseChartOptions = _.cloneDeep(this.chartOptions);

    this.themeService.themeChange.subscribe((isDarkTheme) => {
        // 从原始配置重新生成，避免残留属性
        this.chartOptions = _.cloneDeep(this.baseChartOptions);
        this.chartOptions.theme.mode = isDarkTheme ? 'dark' : 'light';
    });
}

方案2：显式重置Y轴标签样式 #

如果不想重新生成整个配置，可以在切回浅色模式时，手动重置Y轴标签的颜色为默认深色：

this.themeService.themeChange.subscribe((isDarkTheme) => {
    if (isDarkTheme) {
        this.chartOptions = {
            ...this.chartOptions,
            theme: { ...this.chartOptions.theme, mode: 'dark' },
        };                
    } else {
        this.chartOptions = {
            ...this.chartOptions,
            theme: { ...this.chartOptions.theme, mode: 'light' },
            // 显式设置Y轴标签颜色为默认深色
            yaxis: {
                ...this.chartOptions.yaxis,
                labels: {
                    ...this.chartOptions.yaxis?.labels,
                    style: {
                        ...this.chartOptions.yaxis?.labels?.style,
                        colors: ['#333'] // 浅色模式下的Y轴文字颜色
                    }
                }
            }
        };       
    }
});

方案3：调用ApexChart实例的update方法 #

确保图表完全重新渲染配置，需要先获取ApexChart实例：

// 组件中定义chart实例
@ViewChild('chart') chart: ApexChart;

this.themeService.themeChange.subscribe((isDarkTheme) => {
    this.chartOptions.theme.mode = isDarkTheme ? 'dark' : 'light';
    // 调用update方法强制刷新
    this.chart.updateOptions(this.chartOptions);
});

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