proxmox-mirrors/proxmox-widget-toolkit
1
0
Fork 1
mirror of https://git.proxmox.com/git/proxmox-widget-toolkit synced 2025-05-06 11:54:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rrd chart: add support for the dark theme and dynamic theme switching

Browse Source 
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>
This commit is contained in:
Stefan Sterz 2023-03-08 17:36:58 +01:00 committed by Thomas Lamprecht
parent f111efa4fd
commit c5559f82ea
1 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/panel/RRDChart.js
View File

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