Change colors to improve contrast

PVEDiscordDark/js/PVEDiscordDark.js

@@ -1,3 +1,10 @@
+const COLOR_DARK = '#2C2F33'
+const COLOR_DARKER = '#23272a'
+const COLOR_BLURPLE = '#526DD1'
+const COLOR_YELLOW = '#faa61a'
+const COLOR_RED = '#ba2b2d'
+
+
 const swapLogo = async function() {
 	const imgElements = document.getElementsByTagName('img');
 	var found = false;
@@ -7,7 +14,7 @@ const swapLogo = async function() {
 			found = true;
 			var width = (node.parentElement.clientWidth == undefined || node.parentElement.clientWidth == 0) ? 172 : node.parentElement.clientWidth;
 			var height = (node.parentElement.clientHeight == undefined || node.parentElement.clientHeight == 0) ? 30 : node.parentElement.clientHeight;
-			node.parentElement.parentElement.style.background = '#23272A';
+			node.parentElement.parentElement.style.background = COLOR_DARKER;
 			node.setAttribute('height', `${height}px`);
 			node.setAttribute('width', `${width}px`);
 			node.setAttribute('src', '/pve2/images/dd_logo.png');
@@ -20,29 +27,29 @@ const swapLogo = async function() {
 };
 
 const patchCharts = function() {
-	Ext.chart.theme.Base.prototype.config.chart.defaults.background = '#23272a';
+	Ext.chart.theme.Base.prototype.config.chart.defaults.background = COLOR_DARKER;
 	Ext.chart.theme.Base.prototype.config.axis.defaults.label.color = 'white';
 	Ext.chart.theme.Base.prototype.config.axis.defaults.title.color = 'white';
-	Ext.chart.theme.Base.prototype.config.axis.defaults.style.strokeStyle = '#7289DA';
-	Ext.chart.theme.Base.prototype.config.axis.defaults.grid.strokeStyle = 'rgba(44, 47, 51, 1)';
+	Ext.chart.theme.Base.prototype.config.axis.defaults.style.strokeStyle = COLOR_BLURPLE;
+	Ext.chart.theme.Base.prototype.config.axis.defaults.grid.strokeStyle = 'rgba(44, 47, 51, 1)'; // COLOR_DARK
 	Ext.chart.theme.Base.prototype.config.sprites.text.color = 'white';
 };
 
 function patchGaugeWidget() {
-	Proxmox.panel.GaugeWidget.prototype.backgroundColor = '#2C2F33';
-	Proxmox.panel.GaugeWidget.prototype.criticalColor = '#f04747';
-	Proxmox.panel.GaugeWidget.prototype.warningColor = '#faa61a';
-	Proxmox.panel.GaugeWidget.prototype.defaultColor = '#7289DA';
-	Proxmox.panel.GaugeWidget.prototype.items[1].series[0].colors[0] = '#2C2F33';
+	Proxmox.panel.GaugeWidget.prototype.backgroundColor = COLOR_DARK;
+	Proxmox.panel.GaugeWidget.prototype.criticalColor = COLOR_RED;
+	Proxmox.panel.GaugeWidget.prototype.warningColor = COLOR_YELLOW;
+	Proxmox.panel.GaugeWidget.prototype.defaultColor = COLOR_BLURPLE;
+	Proxmox.panel.GaugeWidget.prototype.items[1].series[0].colors[0] = COLOR_DARK;
 };
 
 function patchBackupConfig() {
-	PVE.window.BackupConfig.prototype.items.style['background-color'] = '#23272a';
+	PVE.window.BackupConfig.prototype.items.style['background-color'] = COLOR_DARKER;
 };
 
 function patchDiskSmartWindow() {
 	const target = PVE.DiskSmartWindow || Proxmox.window.DiskSmart;
-	target.prototype.items[1].style['background-color'] = '#23272a';
+	target.prototype.items[1].style['background-color'] = COLOR_DARKER;
 }
 
 function patchTFAEdit() {
@@ -53,7 +60,7 @@ function patchCreateWidget() {
 	_createWidget = Ext.createWidget
 	Ext.createWidget = function(c, p) {
 		if (typeof p === 'object' && typeof p.style === 'object') {
-			if (c === 'component' && typeof p.style['background-color'] === 'string' && p.style['background-color'] === 'white') p.style['background-color'] = '#2C2F33'
+			if (c === 'component' && typeof p.style['background-color'] === 'string' && p.style['background-color'] === 'white') p.style['background-color'] = COLOR_DARK
 		}
 		return _createWidget(c, p)
 	}

PVEDiscordDark/sass/_vars.sass

@@ -1,4 +1,4 @@
-$blurple: #7289da
+$blurple: #526DD1
 $green: #43b581
 $yellow: #faa61a
 $red: #ba2b2d