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

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

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

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

1. 为 Highcharts 加载adaptive.js主题.

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

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

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

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

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

媒体查询与类名

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

<divid="container"class="highcharts-dark">

示例

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