高级可视化图表的暗色模式与主题｜Highcharts 自适应主题配色全解

Highcharts 主题是一组预定义的选项，在每个图表实例化之前作为默认的 Highcharts 选项应用。Highcharts 提供了几种主题，可以通过在页面中包含以下模式的脚本标签，轻松应用到您的图表中：

html 复制代码

<script src="https://code.highcharts.com/themes/adaptive.js"></script>

TypeScript主题的源代码可以在 Highcharts repository找到.

当使用 styled
mode,

时，可以通过加载additional CSS
files来应用主题。

高级图表中的暗模式，自适应主题

Highcharts附带一个自适应主题，/themes/adaptive.js, 它使用CSS变量根据用户偏好的配色方案进行响应式调整（自v12.3起）。它有三种模式：

System . 系统。除非由实现者另行指定，否则自适应主题会根据偏好色彩方案prefers-color-scheme CSS媒体查询使用配色方案。
Forced light .强制亮色。如果任何图表父元素具有 highcharts-light

类名。
Forced dark.强制暗色。如果任何图表父元素具有highcharts-dark类名。

在典型的网站设置中，最终用户可以在系统、浅色和深色模式之间切换。这可以与页面的类名关联，以使图表保持一致。

自适应主题可以扩展为两个层次：

按照下面的示例定义你自己的颜色变量。关于默认的CSS变量名，请参见 css/colors
demo.
如果需要更细粒度的控制，Highcharts中的颜色设置支持CSS变量，例如 background: 'var(--my-custom-background)'.

创建你自己的主题

通过创建一个配置对象并将其应用到图表中，可以应用自定义主题，使用 Highcharts.setOptions方法（这在主题的JavaScript文件中完成）。

使用调色板辅助工具palette helper 来帮助你创建自己的颜色主题。

这是一个简单的非自适应主题的示例：

js 复制代码

Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
             '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
    },
    title: {
        style: {
            color: '#000',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },

    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'black'
        },
        itemHoverStyle:{
            color: 'gray'
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);