Swap logo with JS instead of CSS

PVEDiscordDark/js/PVEDiscordDark.js

@@ -1,15 +1,45 @@
-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';
+const swapLogo = async function() {
+	const imgElements = document.getElementsByTagName('img');
+	var found = false;
+	for (var i = 0; i< imgElements.length; i++) {
+		var source = imgElements[i].src;
+		if (source.includes('proxmox_logo.png')) {
+			found = true;
+			imgElements[i].parentElement.parentElement.style.background = '#23272A';
+			imgElements[i].setAttribute('height', '34px');
+			imgElements[i].setAttribute('width', '177px');
+			imgElements[i].setAttribute('src', '/pve2/images/dd_logo.png');
+		}
+	}
+	if (!found) {
+		await new Promise(resolve => setTimeout(resolve, 60));
+		await swapLogo();
+	};
+};
+
+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';
+};
+
+function patchBackupConfig() {
+	PVE.window.BackupConfig.prototype.items.style['background-color'] = '#23272a';
+};
 
-PVE.window.BackupConfig.prototype.items.style['background-color'] = '#23272a';
-PVE.DiskSmartWindow.prototype.items[1].style['background-color'] = '#23272a';
-PVE.window.TFAEdit.prototype.items[0].items[0].items[1].style["background-color"] = 'transparent';
+function patchDiskSmartWindow() {
+	PVE.DiskSmartWindow.prototype.items[1].style['background-color'] = '#23272a';
+}
 
+function patchTFAEdit() {
+	PVE.window.TFAEdit.prototype.items[0].items[0].items[1].style["background-color"] = 'transparent';
+}
 
-PVE.node.Summary.prototype.showVersions = function() {
+function patchSummary() {
+	// Nothing malicious is done here. The component responsible for the color is residing inside a function, and we cannot just change a functions private variable, so we are overwriting the function with a copy of itself (with changed component color).
+	PVE.node.Summary.prototype.showVersions = function() {
 		var me = this;
 		var nodename = me.pveSelNode.data.node;
 
@@ -64,8 +94,11 @@ PVE.node.Summary.prototype.showVersions = function() {
 			}
 		});
 		}
+}
 
-PVE.node.Subscription.prototype.showReport = function() {
+function patchSubscription() {
+	// Nothing malicious is done here. The component responsible for the color is residing inside a function, and we cannot just change a functions private variable, so we are overwriting the function with a copy of itself (with changed component color).
+	PVE.node.Subscription.prototype.showReport = function() {
 		var me = this;
 
 		var getReportFileName = function() {
@@ -131,5 +164,13 @@ PVE.node.Subscription.prototype.showReport = function() {
 			},
 		});
 		}
+}
 
+swapLogo();
+patchGaugeWidget();
+patchBackupConfig();
+patchDiskSmartWindow();
+patchTFAEdit();
+patchSummary();
+patchSubscription();
 console.log('PVEDiscordDark :: Patched');

PVEDiscordDark/sass/PVEDiscordDark.css

@@ -729,11 +729,6 @@ div[id^="pveNotesView-"][id$="-innerCt"] {
   background: #23272a;
 }
 
-img[src^="/pve2/images/proxmox_logo"] {
-  background: #23272a;
-  content: url("/pve2/images/dd_logo.png");
-}
-
 [id^="versioninfo"] {
   background: #23272a;
 }

PVEDiscordDark/sass/special/_specific.sass

@@ -32,10 +32,6 @@ div[id^="pveStorageStatusView-"][id$="-body"]
 div[id^="pveNotesView-"][id$="-innerCt"]
 	background: #23272a
 
-img[src^="/pve2/images/proxmox_logo"]
-	background: #23272a
-	content: url('/pve2/images/dd_logo.png')
-
 [id^="versioninfo"]
 	background: #23272a