Dark mode for charts

[Werzi2001]

Generally I prefer the dark mode in web applications. The charts within Analytics do not respect the dark mode setting (when using a dark theme) although the maps (e.g. gridsquares) do. I'd like to change that. Could anybody give me a hint on how it was done for maps? In a quick look at the code I could not find a "dark" parameter being passed to the map.

Thanks for your support.

Edit:
Just noticed that it works for some charts but not all. Basically I just want to know what the "flag/trigger" is that causes dark mode to be used. How to do it for each chart I'll research myself.

[AndreasK79]

Great idea. I've implemented several of those you refer to. The ones using chart.js are ok. For those I checked that the background was not white, then changed the css with jquery.

For the ones using Highcharts (Distances Worked and Timeplotter), I did not do a dark mode. Those were done quite a while before I added the themes. I have researched this, and I have found information about it, but it is something I've never gotten around to implement. Here are the links I've found:
https://www.highcharts.com/blog/products/highcharts/dark-mode-in-highcharts/
https://jsfiddle.net/highcharts/vstf68b3/
https://www.highcharts.com/docs/chart-design-and-style/themes

The last one seems to be Statistics. I do not know how to do this in dark mode, but it seems to be something from Google. Look in views/statistics/index.php.

And to answer how the maps where done. They were done with CSS (they were not done by me). Look in overrides.css in the css folder.

.leaflet-tile {
filter: invert() hue-rotate(180deg) sepia(100%) hue-rotate(180deg) !important;
}

Hope this answers your question well enough.

Andreas.

[Werzi2001]

Hello Andreas,

thanks a lot for your input. That definitely gets me going. Just one more thing:
What exactly is the trigger that causes dark mode (in PHP)? Is there a "global" variable, setting or something like that? I guess that I'll have to adapt the javascript for adapting the Highcharts and that it is not possible by CSS alone. Therefore I need some kind of "trigger". Searching for "dark" in the theme name would be possible but maybe there is something else?

[AndreasK79]

That is a good question. The only thing that triggers this in Cloudlog, is a theme change, so my dirty hack for chart.js was checking that the background was not white...

One things that comes to mind, is to flag a theme as dark. This is not possible in the current codebase. I have a waiting PR for custom themes that adds a table. That could be modified to add a flag... If this flag was to be added to the session when logging in, I think your problem would be solved.

[Werzi2001]

I guess in that case I would adapt your "dirty hack". Basically i want it to be consistent with existing code (even if not ideal) and don't want to wait for the custom themes to be merged.

Could you guide me where your check for the background color is? I checked in assets/js/sections/dayswithqso.js but there the color seems to be hard coded to the light colors without any check of background color.

[AndreasK79]

Sorry, it seems I remembered a few details wrong. I did not tweak chart.js (they were good enough, though I see that textcolors would look nicer with white). It was the export button from the datatables...

That was done in footer.php:

    // using this to change color of csv-button if dark mode is chosen
    var background = $('body').css( "background-color");

    if (background != ('rgb(255, 255, 255)')) {
        $(".buttons-csv").css("color", "white");
    }