hourly mail distribution chart: add dynamic color switching

add support for switching the colors of the hourly mail distribution
chart based on css variables.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by:  Dominik Csapak <d.csapak@proxmox.com>

diff --git a/js/HourlyMailDistribution.js b/js/HourlyMailDistribution.js
index a15b1a46615c4e6cbec9f7642be60548c2f7a9d3..8aa5eb7a04e50073df5895fa8feff9d780d2fd91 100644 (file)
--- a/js/HourlyMailDistribution.js
+++ b/js/HourlyMailDistribution.js
@@ -18,6 +18,27 @@ Ext.define('PMG.MailDistChart', {
        fields: ['index'],
     }],
 
+    checkThemeColors: function() {
+       let me = this;
+       let rootStyle = getComputedStyle(document.documentElement);
+
+       // get colors
+       let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+       let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+       let primary = rootStyle.getPropertyValue("--pwt-chart-primary").trim() || "#000000";
+       let gridStroke = rootStyle.getPropertyValue("--pwt-chart-grid-stroke").trim() || "#dddddd";
+
+       // set the colors
+       me.setBackground(background);
+       me.axes.forEach((axis) => {
+               axis.setLabel({ color: text });
+               axis.setTitle({ color: text });
+               axis.setStyle({ strokeStyle: primary });
+               axis.setGrid({ stroke: gridStroke });
+       });
+       me.redraw();
+    },
+
     initComponent: function() {
        var me = this;
 
@@ -47,6 +68,21 @@ Ext.define('PMG.MailDistChart', {
                },
            },
        });
+
+       me.checkThemeColors();
+
+       // switch colors on media query changes
+       me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+       me.themeListener = (e) => { me.checkThemeColors(); };
+       me.mediaQueryList.addEventListener("change", me.themeListener);
+    },
+
+    doDestroy: function() {
+       let me = this;
+
+       me.mediaQueryList.removeEventListener("change", me.themeListener);
+
+       me.callParent();
     },
 });