From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 7B41C9504; Wed, 8 Mar 2023 17:37:08 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 643E6915B; Wed, 8 Mar 2023 17:37:08 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS; Wed, 8 Mar 2023 17:37:07 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id B248445DF1; Wed, 8 Mar 2023 17:37:06 +0100 (CET) From: Stefan Sterz To: pve-devel@lists.proxmox.com, pbs-devel@lists.proxmox.com, pmg-devel@lists.proxmox.com Date: Wed, 8 Mar 2023 17:36:57 +0100 Message-Id: <20230308163658.2453420-2-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230308163658.2453420-1-s.sterz@proxmox.com> References: <20230308161840.2396113-1-s.sterz@proxmox.com> <20230308163658.2453420-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.097 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 08 Mar 2023 16:37:08 -0000 the gauges in the data center overview should use a dark style if the relevant css variables are set. this also makes it possible to switch the colors dynamically by adding an event listener Signed-off-by: Stefan Sterz --- src/panel/GaugeWidget.js | 45 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/panel/GaugeWidget.js b/src/panel/GaugeWidget.js index 0cc2079..00567a2 100644 --- a/src/panel/GaugeWidget.js +++ b/src/panel/GaugeWidget.js @@ -61,6 +61,36 @@ Ext.define('Proxmox.panel.GaugeWidget', { initialValue: 0, + checkThemeColors: function() { + let me = this; + let rootStyle = getComputedStyle(document.documentElement); + + // get colors + let panelBg = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff"; + let textColor = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000"; + me.defaultColor = rootStyle.getPropertyValue("--pwt-gauge-default").trim() || '#c2ddf2'; + me.criticalColor = rootStyle.getPropertyValue("--pwt-gauge-crit").trim() || '#ff6c59'; + me.warningColor = rootStyle.getPropertyValue("--pwt-gauge-warn").trim() || '#fc0'; + me.backgroundColor = rootStyle.getPropertyValue("--pwt-gauge-back").trim() || '#f5f5f5'; + + // set gauge colors + let value = me.chart.series[0].getValue() / 100; + + let color = me.defaultColor; + + if (value >= me.criticalThreshold) { + color = me.criticalColor; + } else if (value >= me.warningThreshold) { + color = me.warningColor; + } + + me.chart.series[0].setColors([color, me.backgroundColor]); + + // set text and background colors + me.chart.setBackground(panelBg); + me.valueSprite.setAttributes({ fillStyle: textColor }, true); + me.chart.redraw(); + }, updateValue: function(value, text) { let me = this; @@ -100,5 +130,20 @@ Ext.define('Proxmox.panel.GaugeWidget', { me.text = me.getComponent('text'); me.chart = me.getComponent('chart'); me.valueSprite = me.chart.getSurface('chart').get('valueSprite'); + + 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