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) server-digest SHA256) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 33B46940B; Wed, 8 Mar 2023 17:25:35 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 1ABE28D5B; Wed, 8 Mar 2023 17:25:35 +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:25:33 +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 3253845DEF; Wed, 8 Mar 2023 17:25:33 +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:25:03 +0100 Message-Id: <20230308162525.2417932-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.099 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 URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [defines.mk] Subject: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme 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:25:35 -0000 this patch series aims to add support for a dark theme to all current proxmox products. including: * proxmox virtual environment web gui & api viewer * proxmox backup server gui & api viewer * proxmox mail gateway gui, api viewer & (mobile) quarantine this patch series is split into several parts. the first concerns the widget toolkit and adds the necessary files and adaptions needed accross all three products. the other three parts integrate the new dark theme into pve, pbs and pmg and also adds changes needed by each product. part 1: widget toolkit the first commit adds styles that give the main gui a "dark" appearance. this includes adjusting the icons and other images as well as all backgrounds text and link colors. the second commit removes certain hard-coded background colors that are set via js. these don't behave properly in the dark theme and the gui behaves properly without them, so they are removed. the third and fourth commit make it possible for charts and gauges to switch their colors based on the current theme. the fifth commit adds a theme switcher widget that allows switching the current theme and then sets a cookie accordingly. the last commit is only relevant for the proxmox mail gateway and enables the proposed "theme switcher" function. this allows users to enable or disable a filter over the email preview in the quarantine. if the filter is enabled the email will have it's brightness reduced and the colors will be inverted. thus, plain text emails shouldn't appear too bright part 2: proxmox virtual environment the first commit for pve adds the theme switcher to the gui, the second adjusts the pveproxy template to properly handle the cookie set by the theme switcher. the third removes unnecessary hard-coded background colors and the forth add support for the charts used in pve only. the fifth commit concern pve-docs and adds support for the dark theme in the api viewer. part 3: proxmox backup server the commits for proxmox backup server first add the theme switcher, then removes hard-coded backgrounds and finally add dark theme support to the api viewer. part 4: proxmox mail gateway the first commit concerns the api and let's it handle cookie properly. the next five commits adjust gui to first add a theme switcher, then style the spam info grid, remove hard-coded white backgrounds, style the hourly mail chart, and enable the dark mode in the mobile quarantine. the second-to-last commit enables the theme switching mechanism for the quarantine mail preview. this part could be dropped in favor of extending the preview endpoint to add some styles to the preview that handle a dark theme. this would have the added benefit of also working in the mobile quarantine. the last commit for the mail gateway enables the dark theme in the api viewer. Daniel Tschlatscher (2): dark-theme: add initial version of the proxmox-dark theme util/window/form: add a theme selector Stefan Sterz (4): subscription/summary/backup: stop setting the background color gauge widget: add support for a dark theme and dynamic theme switching rrd chart: add support for the dark theme and dynamic theme switching dark-theme: add support for the pmg quarantine theme toggle debian/control | 1 + src/Makefile | 4 +- src/Utils.js | 25 +++ src/defines.mk | 1 + src/form/ThemeSelector.js | 6 + src/node/APT.js | 1 - src/panel/GaugeWidget.js | 45 ++++ src/panel/RRDChart.js | 37 ++++ src/proxmox-dark/Makefile | 47 ++++ src/proxmox-dark/scss/ProxmoxDark.scss | 37 ++++ src/proxmox-dark/scss/abstracts/_mixins.scss | 12 ++ .../scss/abstracts/_variables.scss | 67 ++++++ src/proxmox-dark/scss/extjs/_body.scss | 23 ++ src/proxmox-dark/scss/extjs/_grid.scss | 146 +++++++++++++ src/proxmox-dark/scss/extjs/_menu.scss | 39 ++++ src/proxmox-dark/scss/extjs/_panel.scss | 25 +++ .../scss/extjs/_presentation.scss | 14 ++ src/proxmox-dark/scss/extjs/_progress.scss | 19 ++ src/proxmox-dark/scss/extjs/_splitter.scss | 18 ++ src/proxmox-dark/scss/extjs/_tabbar.scss | 43 ++++ src/proxmox-dark/scss/extjs/_tip.scss | 18 ++ src/proxmox-dark/scss/extjs/_toolbar.scss | 21 ++ src/proxmox-dark/scss/extjs/_treepanel.scss | 24 +++ src/proxmox-dark/scss/extjs/_window.scss | 39 ++++ src/proxmox-dark/scss/extjs/form/_button.scss | 57 +++++ .../scss/extjs/form/_combobox.scss | 23 ++ .../scss/extjs/form/_formfield.scss | 40 ++++ src/proxmox-dark/scss/other/_charts.scss | 39 ++++ src/proxmox-dark/scss/other/_icons.scss | 200 ++++++++++++++++++ .../scss/proxmox/_datepicker.scss | 61 ++++++ src/proxmox-dark/scss/proxmox/_general.scss | 56 +++++ .../scss/proxmox/_helpbutton.scss | 16 ++ .../scss/proxmox/_loadingindicator.scss | 14 ++ src/proxmox-dark/scss/proxmox/_markdown.scss | 31 +++ src/proxmox-dark/scss/proxmox/_nodes.scss | 9 + .../scss/proxmox/_quarantine.scss | 53 +++++ src/proxmox-dark/scss/proxmox/_storages.scss | 19 ++ src/proxmox-dark/scss/proxmox/_tags.scss | 14 ++ src/window/AddTotp.js | 1 - src/window/DiskSmart.js | 1 - src/window/PackageVersions.js | 1 - src/window/ThemeEdit.js | 49 +++++ 42 files changed, 1391 insertions(+), 5 deletions(-) create mode 100644 src/form/ThemeSelector.js create mode 100644 src/proxmox-dark/Makefile create mode 100644 src/proxmox-dark/scss/ProxmoxDark.scss create mode 100644 src/proxmox-dark/scss/abstracts/_mixins.scss create mode 100644 src/proxmox-dark/scss/abstracts/_variables.scss create mode 100644 src/proxmox-dark/scss/extjs/_body.scss create mode 100644 src/proxmox-dark/scss/extjs/_grid.scss create mode 100644 src/proxmox-dark/scss/extjs/_menu.scss create mode 100644 src/proxmox-dark/scss/extjs/_panel.scss create mode 100644 src/proxmox-dark/scss/extjs/_presentation.scss create mode 100644 src/proxmox-dark/scss/extjs/_progress.scss create mode 100644 src/proxmox-dark/scss/extjs/_splitter.scss create mode 100644 src/proxmox-dark/scss/extjs/_tabbar.scss create mode 100644 src/proxmox-dark/scss/extjs/_tip.scss create mode 100644 src/proxmox-dark/scss/extjs/_toolbar.scss create mode 100644 src/proxmox-dark/scss/extjs/_treepanel.scss create mode 100644 src/proxmox-dark/scss/extjs/_window.scss create mode 100644 src/proxmox-dark/scss/extjs/form/_button.scss create mode 100644 src/proxmox-dark/scss/extjs/form/_combobox.scss create mode 100644 src/proxmox-dark/scss/extjs/form/_formfield.scss create mode 100644 src/proxmox-dark/scss/other/_charts.scss create mode 100644 src/proxmox-dark/scss/other/_icons.scss create mode 100644 src/proxmox-dark/scss/proxmox/_datepicker.scss create mode 100644 src/proxmox-dark/scss/proxmox/_general.scss create mode 100644 src/proxmox-dark/scss/proxmox/_helpbutton.scss create mode 100644 src/proxmox-dark/scss/proxmox/_loadingindicator.scss create mode 100644 src/proxmox-dark/scss/proxmox/_markdown.scss create mode 100644 src/proxmox-dark/scss/proxmox/_nodes.scss create mode 100644 src/proxmox-dark/scss/proxmox/_quarantine.scss create mode 100644 src/proxmox-dark/scss/proxmox/_storages.scss create mode 100644 src/proxmox-dark/scss/proxmox/_tags.scss create mode 100644 src/window/ThemeEdit.js -- 2.30.2