[pbs-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6

[pbs-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6

[Stefan Sterz]

this patch series adds a couple more tweaks to the dark theme. first
it improves the contrast ratios on panel header tool icons. then the
chart and gauge colors are brightened to match the primary color.

for the backup server first the path to the dark theme css in the api
viewer is fixed. then the theme switcher menu item is renamed to
"color theme" to match promox ve. the final patch also renames this
menu item for the mail gateway.

Stefan Sterz (2) @ widget-toolkit:
  dark-mode: adjust panel header tool icons
  fix #4618: dark-mode: lighten critical/warning charts/gauges colors

 src/proxmox-dark/scss/extjs/_panel.scss    | 37 +++++++++++++++++++---
 src/proxmox-dark/scss/extjs/_progress.scss |  4 +--
 src/proxmox-dark/scss/other/_charts.scss   |  4 +--
 3 files changed, 36 insertions(+), 9 deletions(-)

Stefan Sterz (2) @ proxmox-backup:
  docs: fix api viewer dark theme path
  ui: main view: rename "Theme" selector to "Color Theme"

 docs/api-viewer/index.html | 2 +-
 www/MainView.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

Stefan Sterz (1) @ pmg-gui:
  main view/quarantine: rename "Theme" selector to "Color Theme"

 js/MainView.js       | 2 +-
 js/QuarantineView.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

-- 
2.30.2

[pbs-devel] [PATCH widget-toolkit 1/2] dark-mode: adjust panel header tool icons

[Stefan Sterz]

by brigthenening the icons on a more individual basis some darker ones
can now feature higher contrasts while others won't be too bright.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_panel.scss | 37 +++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/_panel.scss b/src/proxmox-dark/scss/extjs/_panel.scss
index 217d3f8..a3c9682 100644
--- a/src/proxmox-dark/scss/extjs/_panel.scss
+++ b/src/proxmox-dark/scss/extjs/_panel.scss
@@ -2,15 +2,42 @@
   background-color: $content-background-color;
   border: none;
 
-  // The small navigation elements in the panel header bar e.g. to
-  // collapse a panel
   .x-tool-tool-el {
     background-color: transparent;
-    filter: brightness(120%);
+  }
+}
+
+// The small navigation elements in the panel header bar e.g. to
+// collapse a panel
+.x-tool-img {
+  filter: brightness(175%);
+
+  // these are brighter per default, so they don't need to be
+  // brigthened as much
+  &.x-tool-expand,
+  &.x-tool-collapse,
+  &.x-tool-refresh {
+    filter: brightness(125%);
+  }
+
+  // this icon uses multiple tones, to have them behave appropriatelly
+  // invert them before brightening them
+  &.x-tool-print {
+    filter: invert(100%) hue-rotate(180deg) brightness(125%);
+  }
+
+  .x-tool-over & {
+    filter: brightness(200%);
+  }
+
+  .x-tool-over &.x-tool-expand,
+  .x-tool-over &.x-tool-collapse,
+  .x-tool-over &.x-tool-refresh {
+    filter: brightness(150%);
   }
 
-  .x-tool-over .x-tool-tool-el {
-    filter: brightness(140%);
+  .x-tool-over &.x-tool-print {
+    filter: invert(100%) hue-rotate(180deg) brightness(150%);
   }
 }
 
-- 
2.30.2

[pbs-devel] [PATCH widget-toolkit 2/2] fix #4618: dark-mode: lighten critical/warning charts/gauges colors

[Stefan Sterz]

by increasing the lightness of these colors to to make them have the
same amount of lightness as the primary color.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_progress.scss | 4 ++--
 src/proxmox-dark/scss/other/_charts.scss   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/_progress.scss b/src/proxmox-dark/scss/extjs/_progress.scss
index 4f2bb49..5d5941c 100644
--- a/src/proxmox-dark/scss/extjs/_progress.scss
+++ b/src/proxmox-dark/scss/extjs/_progress.scss
@@ -11,9 +11,9 @@
 }
 
 .x-progress.warning .x-progress-bar {
-  background-color: $background-warning;
+  background-color: var(--pwt-gauge-warn);
 }
 
 .x-progress.critical .x-progress-bar {
-  background-color: $background-invalid;
+  background-color: var(--pwt-gauge-crit);
 }
diff --git a/src/proxmox-dark/scss/other/_charts.scss b/src/proxmox-dark/scss/other/_charts.scss
index 5c67282..26b0104 100644
--- a/src/proxmox-dark/scss/other/_charts.scss
+++ b/src/proxmox-dark/scss/other/_charts.scss
@@ -7,8 +7,8 @@
   --pwt-text-color: #{$text-color};
   --pwt-gauge-default: #{$primary-color};
   --pwt-gauge-back: #{$background-dark};
-  --pwt-gauge-warn: #{$background-warning};
-  --pwt-gauge-crit: #{$background-invalid};
+  --pwt-gauge-warn: #{adjust-color($background-warning, $lightness: lightness($primary-color))};
+  --pwt-gauge-crit: #{adjust-color($background-invalid, $lightness: lightness($primary-color))};
   --pwt-chart-primary: #{$primary-color};
   --pwt-chart-grid-stroke: #{$content-background-selected};
 }
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 1/2] docs: fix api viewer dark theme path

[Stefan Sterz]

previously the path to the dark theme's css pointed to the wrong file.
it didn't exist, this one should.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 docs/api-viewer/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-viewer/index.html b/docs/api-viewer/index.html
index dbe5e637..72dae96a 100644
--- a/docs/api-viewer/index.html
+++ b/docs/api-viewer/index.html
@@ -6,7 +6,7 @@
     <title>Proxmox Backup Server API Documentation</title>
 
     <link rel="stylesheet" type="text/css" href="extjs/theme-crisp/resources/theme-crisp-all.css">
-    <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/pwt/themes/theme-proxmox-dark.css" />
+    <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/widgettoolkit/themes/theme-proxmox-dark.css" />
     <script type="text/javascript" src="extjs/ext-all.js"></script>
     <script type="text/javascript" src="apidoc.js"></script>
 </head>
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 2/2] ui: main view: rename "Theme" selector to "Color Theme"

[Stefan Sterz]

this is already the case in Proxmox VE so just use the same wording
here too to stay consistent

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 www/MainView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/MainView.js b/www/MainView.js
index 0f09f676..d35162e4 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -249,7 +249,7 @@ Ext.define('PBS.MainView', {
 			},
 			{
 			    iconCls: 'fa fa-paint-brush',
-			    text: gettext('Theme'),
+			    text: gettext('Color Theme'),
 			    handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
 				cookieName: 'PBSThemeCookie',
 				autoShow: true,
-- 
2.30.2

[pbs-devel] applied-series: [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6

[Thomas Lamprecht]

Am 14/04/2023 um 15:28 schrieb Stefan Sterz:
> this patch series adds a couple more tweaks to the dark theme. first
> it improves the contrast ratios on panel header tool icons. then the
> chart and gauge colors are brightened to match the primary color.
> 
> for the backup server first the path to the dark theme css in the api
> viewer is fixed. then the theme switcher menu item is renamed to
> "color theme" to match promox ve. the final patch also renames this
> menu item for the mail gateway.
> 
> Stefan Sterz (2) @ widget-toolkit:
>   dark-mode: adjust panel header tool icons
>   fix #4618: dark-mode: lighten critical/warning charts/gauges colors
> 
>  src/proxmox-dark/scss/extjs/_panel.scss    | 37 +++++++++++++++++++---
>  src/proxmox-dark/scss/extjs/_progress.scss |  4 +--
>  src/proxmox-dark/scss/other/_charts.scss   |  4 +--
>  3 files changed, 36 insertions(+), 9 deletions(-)
> 
> Stefan Sterz (2) @ proxmox-backup:
>   docs: fix api viewer dark theme path
>   ui: main view: rename "Theme" selector to "Color Theme"
> 
>  docs/api-viewer/index.html | 2 +-
>  www/MainView.js            | 2 +-
>  2 files changed, 2 insertions(+), 2 deletions(-)
> 
> Stefan Sterz (1) @ pmg-gui:
>   main view/quarantine: rename "Theme" selector to "Color Theme"
> 
>  js/MainView.js       | 2 +-
>  js/QuarantineView.js | 2 +-
>  2 files changed, 2 insertions(+), 2 deletions(-)
> 


applied all the patches in the respective three repos, thanks!