[pbs-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching

[Stefan Sterz]

the gauges in the data center overview should use a dark style if the
relevant css variables are set. this also makes it possible to switch
the colors dynamically by adding an event listener

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

diff --git a/src/panel/GaugeWidget.js b/src/panel/GaugeWidget.js
index 0cc2079..00567a2 100644
--- a/src/panel/GaugeWidget.js
+++ b/src/panel/GaugeWidget.js
@@ -61,6 +61,36 @@ Ext.define('Proxmox.panel.GaugeWidget', {
 
     initialValue: 0,
 
+    checkThemeColors: function() {
+	let me = this;
+	let rootStyle = getComputedStyle(document.documentElement);
+
+	// get colors
+	let panelBg = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+	let textColor = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+	me.defaultColor = rootStyle.getPropertyValue("--pwt-gauge-default").trim() || '#c2ddf2';
+	me.criticalColor = rootStyle.getPropertyValue("--pwt-gauge-crit").trim() || '#ff6c59';
+	me.warningColor = rootStyle.getPropertyValue("--pwt-gauge-warn").trim() || '#fc0';
+	me.backgroundColor = rootStyle.getPropertyValue("--pwt-gauge-back").trim() || '#f5f5f5';
+
+	// set gauge colors
+	let value = me.chart.series[0].getValue() / 100;
+
+	let color = me.defaultColor;
+
+	if (value >= me.criticalThreshold) {
+	    color = me.criticalColor;
+	} else if (value >= me.warningThreshold) {
+	    color = me.warningColor;
+	}
+
+	me.chart.series[0].setColors([color, me.backgroundColor]);
+
+	// set text and background colors
+	me.chart.setBackground(panelBg);
+	me.valueSprite.setAttributes({ fillStyle: textColor }, true);
+	me.chart.redraw();
+    },
 
     updateValue: function(value, text) {
 	let me = this;
@@ -100,5 +130,20 @@ Ext.define('Proxmox.panel.GaugeWidget', {
 	me.text = me.getComponent('text');
 	me.chart = me.getComponent('chart');
 	me.valueSprite = me.chart.getSurface('chart').get('valueSprite');
+
+	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