[pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching

[Stefan Sterz]

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

Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
---
 js/HourlyMailDistribution.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/js/HourlyMailDistribution.js b/js/HourlyMailDistribution.js
index a15b1a4..8aa5eb7 100644
--- 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();
     },
 });
 
-- 
2.30.2