Highcharts Dark Mode Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

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


<div id="container"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

:root { /* light mode */
	--background-color: #ffffff;
	--text-color: #292b2c;
	--hilight-color: #0275d8;
}

@media (prefers-color-scheme: dark) { 
    :root {
        --background-color: #1F2227;
        --text-color: #c0c0c0;
        --hilight-color: #8db4d6;
    }
    
    /* Some data colors. Light mode uses defaults */
    .highcharts-color-0 {
        fill: #0460ba;
        stroke: #0460ba;
    }
    .highcharts-color-1 {
        fill: #9696ab;
        stroke: #9696ab;
    }
}

body {
    background-color: var(--background-color);
}
.highcharts-background {
    fill: var(--background-color);
}
.highcharts-container text {
    fill: var(--text-color);
}
.highcharts-subtitle,
.highcharts-credits,
.highcharts-axis-title {
    fill-opacity: 0.7;
}
.highcharts-grid-line {
    stroke: var(--text-color);
    stroke-opacity: 0.2;
}
.highcharts-tooltip-box {
    fill: var(--background-color);
}
.highcharts-column-series rect.highcharts-point {
    stroke: var(--background-color);
}

JavaScript

/* global CodeMirror*/


var chart = Highcharts.chart('container', {

    chart: {
        type: 'column',
        styledMode: true
    },

    title: {
        text: 'Highcharts Dark Mode / Light Mode'
    },
    
    subtitle: {
    	text: 'The color mode follows the OS setting'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

    legend: {
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical'
    },

    series: [{
        data: [1, 2, 3]
    }, {
        data: [1, 2, 3]
    }, {
        data: [3, 2, 1],
        type: 'line'
    }]

});