Dark mode

[rogerfar]

Is it possible to add a dark mode? Or should we manually change the background color?

[AntonioDePau]

Hi @rogerfar, you can easily implement dark mode yourself by passing the following options when creating your chart (for a pie chart in this case):

let options = {
    theme: {
        chart: {
            backgroundColor: 'transparent'
        },
        legend: {
            label: {
                color: 'white'
            }
        }
    }
}

let chart = new PieChart({
    el: el,
    data: data,
    options: options
});

If you want to monitor mode/theme changes:

let theme = window.matchMedia("(prefers-color-scheme: dark)");

const applyTheme = (isDarkMode) => {
    options.theme.legend.label.color = isDarkMode ? "white" : "black";
    chart.setOptions(options);
}

// apply theme right after we draw the chart
applyTheme(theme.matches);
        
// monitor theme changes and apply the new theme
theme.addEventListener("change", e => {
    applyTheme(e.matches);
});