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 2807A906A4 for ; Thu, 9 Mar 2023 09:01:21 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 10807708E for ; Thu, 9 Mar 2023 09:01:21 +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 for ; Thu, 9 Mar 2023 09:01:20 +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 4141841DD4 for ; Thu, 9 Mar 2023 09:01:20 +0100 (CET) From: Stefan Sterz To: pmg-devel@lists.proxmox.com Date: Thu, 9 Mar 2023 09:01:16 +0100 Message-Id: <20230309080116.29694-1-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com> References: <20230308161840.2396113-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.076 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: [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching X-BeenThere: pmg-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Mail Gateway development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 09 Mar 2023 08:01:21 -0000 add support for switching the colors of the hourly mail distribution chart based on css variables. Signed-off-by: Stefan Sterz --- js/HourlyMailDistribution.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/js/HourlyMailDistribution.js b/js/HourlyMailDistribution.js index a15b1a4..8aa5eb7 100644 --- a/js/HourlyMailDistribution.js +++ b/js/HourlyMailDistribution.js @@ -18,6 +18,27 @@ Ext.define('PMG.MailDistChart', { fields: ['index'], }], + 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() { var me = this; @@ -47,6 +68,21 @@ Ext.define('PMG.MailDistChart', { }, }, }); + + 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