[pve-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the dark theme and dynamic theme switching

[Stefan Sterz]

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.st...@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();
     },
 });
-- 
2.30.2



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel