tsarevvv/proxmox-backup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: dark mode: add dark mode colors to the datastore usage charts

Browse Source 
For the `Datastore -> Summary` overview for all configured datastores.

Fix is adapted from the PVE's ceph's status details or performance
runningCharts, which are both similar (but not really the same)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
 [ T: expand commit message to note that this is adapted from PVE ]
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Dominik Csapak 2023-03-28 15:11:48 +02:00 committed by Thomas Lamprecht
parent db10278b95
commit 5f97b9ce16
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
www/panel/UsageChart.js
View File

@ -101,6 +101,27 @@ Ext.define('PBS.widget.UsageChart', {
me.getComponent('title').update({ title: title });
},
checkThemeColors: function() {
let me = this;
let rootStyle = getComputedStyle(document.documentElement);
// get color
let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
let gridStroke = rootStyle.getPropertyValue("--pwt-chart-grid-stroke").trim() || "#dddddd";
// set the colors
me.chart.setBackground(background);
if (!me.color) {
me.chart.axes.forEach((axis) => {
axis.setLabel({ color: text });
axis.setTitle({ color: text });
axis.setStyle({ strokeStyle: gridStroke });
});
}
me.chart.redraw();
},
initComponent: function() {
var me = this;
me.callParent();
@ -116,5 +137,12 @@ Ext.define('PBS.widget.UsageChart', {
stroke: me.color,
});
}
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);
},
});