如何在切换页面主题时修改Highcharts的plotline（绘图线）颜色

解决方案 #

方案1：监听主题切换事件动态更新图表配置

先将图表实例存储为变量，主题切换时调用chart.update()方法直接修改plotLine的颜色属性即可：

// 初始化时存储图表实例，isDarkMode为当前主题的判定变量，可根据你自己的主题逻辑替换
const chart = Highcharts.chart('container', {
    chart: {
        backgroundColor: isDarkMode ? '#000' : '#fff',
        type: 'line'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        plotLines: [{
            color: isDarkMode ? '#FFF' : '#000',
            width: 2,
            value: 5.5,
            dashStyle: 'dash'
        }]
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

// 主题切换触发时执行该方法，传入最新的主题状态
function handleThemeToggle(isDarkMode) {
    chart.update({
        chart: {
            backgroundColor: isDarkMode ? '#000' : '#fff'
        },
        xAxis: {
            plotLines: [{
                color: isDarkMode ? '#FFF' : '#000',
                width: 2,
                value: 5.5,
                dashStyle: 'dash'
            }]
        }
    })
}

你当前的效果图参考：

方案2：使用CSS变量绑定色值（更简洁）

如果你的项目主题是通过CSS类切换实现的，可以直接用CSS变量绑定色值，无需额外写JS逻辑修改图表配置：
首先在全局CSS中定义主题变量：

/* 默认深色主题 */
:root {
    --plotline-color: #fff;
    --chart-bg-color: #000;
}
/* 浅色主题 */
body.light {
    --plotline-color: #000;
    --chart-bg-color: #fff;
}

然后直接在Highcharts配置中引用CSS变量即可：

Highcharts.chart('container', {
    chart: {
        backgroundColor: 'var(--chart-bg-color)',
        type: 'line'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        plotLines: [{
            color: 'var(--plotline-color)',
            width: 2,
            value: 5.5,
            dashStyle: 'dash'
        }]
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

后续切换主题时只需要给body标签添加/移除light类即可自动同步图表色值，不需要单独操作图表实例。

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