Highcharts Dark Mode

[natankeddem]

Is there any plans to support a dark mode theme with Highcharts?

[falkoschindler]

Yes, we definitely want to add dark mode support to all NiceGUI elements.

I'm just not sure how to do that for elements like ui.chart. We can look for the body--dark class on the body tag or introduce a new window event that indicates a change from dark to light or vice versa. Then we need to find out how to apply a custom (or pre-defined) color theme to the Highcharts object in chart.js. And this shouldn't interfere with possible color definitions from the user's options dictionary.

We could definitely need some help. 🙂

[natankeddem]

Highcharts supports dark mode inherently but NiceGUI doesn't appear to utilize the standard Highcharts css? I am too green with frontends (hence my usage of NiceGUI in the first place) to work out the best method to get this done I think. I don't know if this helps at all but it does something, based on https://www.highcharts.com/samples/highcharts/css/prefers-color-scheme:

from nicegui import ui
from random import random
from datetime import datetime as dt

style = """
<style>
@import url("https://code.highcharts.com/css/highcharts.css");
@media (prefers-color-scheme: dark) {
    :root {
        /* Colors for data series and points */
        --highcharts-color-0: #b3597c;
        --highcharts-color-1: #c4688c;
        --highcharts-color-2: #78a8d1;
        --highcharts-color-3: #7991d2;
        --highcharts-color-4: #7d7bd4;
        --highcharts-color-5: #977dd5;
        --highcharts-color-6: #b3597c;
        --highcharts-color-7: #b27fd6;

        /* UI colors */
        --highcharts-background-color: #333;

        /*
            Neutral color variations
            https://www.highcharts.com/samples/highcharts/css/palette-helper
        */
        --highcharts-neutral-color-100: rgb(255, 255, 255);
        --highcharts-neutral-color-80: rgb(214, 214, 214);
        --highcharts-neutral-color-60: rgb(173, 173, 173);
        --highcharts-neutral-color-40: rgb(133, 133, 133);
        --highcharts-neutral-color-20: rgb(92, 92, 92);
        --highcharts-neutral-color-10: rgb(71, 71, 71);
        --highcharts-neutral-color-5: rgb(61, 61, 61);
        --highcharts-neutral-color-3: rgb(57, 57, 57);

        /* Highlight color variations */
        --highcharts-highlight-color-100: rgb(122, 167, 255);
        --highcharts-highlight-color-80: rgb(108, 144, 214);
        --highcharts-highlight-color-60: rgb(94, 121, 173);
        --highcharts-highlight-color-20: rgb(65, 74, 92);
        --highcharts-highlight-color-10: rgb(58, 63, 71);
    }
}

.highcharts-dark {
    /* Colors for data series and points */
    --highcharts-color-0: #b3597c;
    --highcharts-color-1: #c4688c;
    --highcharts-color-2: #78a8d1;
    --highcharts-color-3: #7991d2;
    --highcharts-color-4: #7d7bd4;
    --highcharts-color-5: #977dd5;
    --highcharts-color-6: #b3597c;
    --highcharts-color-7: #b27fd6;

    /* UI colors */
    --highcharts-background-color: #333;

    /* Neutral color variations */
    --highcharts-neutral-color-100: rgb(255, 255, 255);
    --highcharts-neutral-color-80: rgb(214, 214, 214);
    --highcharts-neutral-color-60: rgb(173, 173, 173);
    --highcharts-neutral-color-40: rgb(133, 133, 133);
    --highcharts-neutral-color-20: rgb(92, 92, 92);
    --highcharts-neutral-color-10: rgb(71, 71, 71);
    --highcharts-neutral-color-5: rgb(61, 61, 61);
    --highcharts-neutral-color-3: rgb(57, 57, 57);

    /* Highlight color variations */
    --highcharts-highlight-color-100: rgb(122, 167, 255);
    --highcharts-highlight-color-80: rgb(108, 144, 214);
    --highcharts-highlight-color-60: rgb(94, 121, 173);
    --highcharts-highlight-color-20: rgb(65, 74, 92);
    --highcharts-highlight-color-10: rgb(58, 63, 71);
}
</style>
"""

ui.add_head_html(style)
chart = ui.chart(
    {
        "title": False,
        "chart": {"type": "line"},
        "series": [{"name": "Alpha", "data": []}],
    }
).classes("w-full h-64 highcharts-dark")


def update():
    chart.options["series"][0]["data"].append(random())
    chart.update()


ui.button("Update", on_click=update)

ui.run(dark=True)

[falkoschindler]

Thanks for the example, @natankeddem!
As far as I understand, you don't need to use highcharts.css. But I'm not sure about the purpose of this file.
Your code works in principle, but maybe there's a solution that doesn't require so much custom CSS. And it looks like some definitions are missing, since the legend and tooltip text is still dark.

[valankar]

This might have been updated since this posting, but I was looking into this recently. It seems the following works:

ui.add_css('@import url("https://code.highcharts.com/css/highcharts.css")')

chart = ui.chart(
    {
        "title": False,
        "chart": {"type": "line", "styledMode": True},
        "series": [{"name": "Alpha", "data": []}],
    }
).classes("w-full h-64 highcharts-dark")

You don't need any other CSS per https://www.highcharts.com/docs/dashboards/light-dark-theme.