Highcharts Dashboards 之明和暗主题设置使用文档

Highcharts.js2025-12-17 15:06

亮色与暗色自适应主题允许你在仪表盘的亮色主题和暗色主题之间切换。要使用亮色与暗色主题，你需要导入 dashboards.css 文件。

css 复制代码

@import "https://code.highcharts.com/dashboards/css/dashboards.css";

接下来，如果你的仪表盘包含带有Highcharts图表的组件，你可能想要应用自适应的Highcharts主题。有两种方式：

为 Highcharts 加载 adaptive.js 主题.

html 复制代码

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

或者, 使用 styledMode 并导入 https://code.highcharts.com/dashboards/css/dashboards.css 。为所有包含图表的组件启用 styledMode 选项。你可以通过在组件配置中将 styledMode 选项设置为 true 来实现。

js 复制代码

{
    type: 'Highcharts',
    renderTo: 'chart-container',
    chartOptions: {
        chart: {
            styledMode: true
        }
        ...
    }
    ...
}

或者你可以通过使用setOptions 方法在全局设置此选项。

js 复制代码

Highcharts.setOptions({
    chart: {
        styledMode: true
    }
});

媒体查询与类名

默认情况下，主题通过
prefers-color-scheme 媒体查询设置为系统默认主题。你也可以通过将 highcharts-light 或 highcharts-dark 类应用到仪表盘容器上，强制使用特定的配色方案。

html 复制代码

<div id="container" class="highcharts-dark">

示例

使用仪表盘下方的单选按钮来切换主题。