From c5559f82ea2536dd12de74f7bb5bb29ae81a63cb Mon Sep 17 00:00:00 2001
From: Stefan Sterz <s.sterz@proxmox.com>
Date: Wed, 8 Mar 2023 17:36:58 +0100
Subject: [PATCH] rrd chart: add support for the dark theme and dynamic theme
 switching

by integrating the theme switching logic into the chart panel itself,
themes can be switched more responsively based on css variables.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/panel/RRDChart.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js
index 263070a..dc5940c 100644
--- a/src/panel/RRDChart.js
+++ b/src/panel/RRDChart.js
@@ -183,6 +183,27 @@ Ext.define('Proxmox.widget.RRDChart', {
 	me.callParent([config]);
     },
 
+    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() {
 	let me = this;
 
@@ -275,5 +296,21 @@ Ext.define('Proxmox.widget.RRDChart', {
 		easing: 'easeIn',
 	    });
 	}, this, { single: true });
+
+
+	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();
     },
 });