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

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

[Stefan Sterz]

this theme switches the default theme to the 'auto' theme for
all three producs (pve, pmg, pbs) in addition to two minor fix-ups

* for the widget toolkit a bit of brightness is added to the check-box
  icons
* in the pmg-gui the main logo in the mobile quarantine is styled
  properly

note that the patches for pbs and pmg are meant as fix-ups for the yet
to be applied patches from the initial dark theme series. if this is
too inconvenient ill re-submit these patches once they are applied. if
they are applied, squashing these into the previous commits might make
sense, though.

Stefan Sterz (2):
  utils: move to using the auto theme per default
  dark-theme: increase contrast on check-boxes

 src/Utils.js                            | 4 ++--
 src/proxmox-dark/scss/other/_icons.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

-- 
2.30.2

[pmg-devel] [PATCH widget-toolkit 1/2] utils: move to using the auto theme per default

[Stefan Sterz]

make the new default theme the "auto" theme that uses media queries to
detect a users preferred theme.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/Utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index 2ab1d0a..c9c00a9 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -110,13 +110,13 @@ utilities: {
     },
 
     theme_map: {
-	auto: 'auto',
+	crisp: 'Light theme',
 	"proxmox-dark": 'Proxmox Dark',
     },
 
     render_theme: function(value) {
 	if (!value || value === '__default__') {
-	    return Proxmox.Utils.defaultText + ' (Light theme)';
+	    return Proxmox.Utils.defaultText + ' (auto)';
 	}
 	let text = Proxmox.Utils.theme_map[value];
 	if (text) {
-- 
2.30.2

[pmg-devel] [PATCH widget-toolkit 2/2] dark-theme: increase contrast on check-boxes

[Stefan Sterz]

by adding a bit of brightness to the icons they stand out a bit more,
especially when selected but not active (grey check-mark)

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/other/_icons.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/proxmox-dark/scss/other/_icons.scss b/src/proxmox-dark/scss/other/_icons.scss
index f132dae..b4443ee 100644
--- a/src/proxmox-dark/scss/other/_icons.scss
+++ b/src/proxmox-dark/scss/other/_icons.scss
@@ -108,7 +108,7 @@
 .x-form-radio-default,
 .x-column-header-checkbox .x-column-header-checkbox::after,
 .x-grid-checkcolumn::after {
-  filter: invert($icon-brightness) hue-rotate(180deg);
+  filter: invert($icon-brightness) hue-rotate(180deg) brightness(125%);
 }
 
 .x-tree-icon-custom,
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui 1/2] mobile quarantine: properly style main logo

[Stefan Sterz]

the main logo, presented when logging in, was previously not styled
correctly an consequently did not have enough contrast with the
background.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 css/ext6-pmg-mobile.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/ext6-pmg-mobile.css b/css/ext6-pmg-mobile.css
index 85954f9..2fd6e48 100644
--- a/css/ext6-pmg-mobile.css
+++ b/css/ext6-pmg-mobile.css
@@ -46,6 +46,7 @@ img.logo-navbar {
 }
 
 @media (prefers-color-scheme: dark) {
+    img.logo,
     img.logo-navbar {
         filter: invert(100%) hue-rotate(180deg);
     }
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui 2/2] index template: make it easier to use the auto theme per default

[Stefan Sterz]

adapt the main template so the proxy can use the "auto" theme per
default more easily.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 pmg-index.html.tt | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pmg-index.html.tt b/pmg-index.html.tt
index 12c18d3..9ffd3bb 100644
--- a/pmg-index.html.tt
+++ b/pmg-index.html.tt
@@ -13,13 +13,13 @@
     <link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" href="/pve2/css/ext6-pmg.css?ver=[% version %]" />
     <link rel="stylesheet" type="text/css" href="/pwt/css/ext6-pmx.css?ver=[% wtversion %]" />
-    [%- IF theme %]
-      [%- IF theme == 'auto' %]
-    <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/pwt/themes/theme-proxmox-dark.css?ver=[% wtversion %]" />
-      [%- ELSE %]
+    [%- IF theme != 'crisp' %]
+      [%- IF theme != 'auto' %]
     <link rel="stylesheet" type="text/css" href="/pwt/themes/theme-[% theme %].css?ver=[% wtversion %]" />
+      [%- ELSE %]
+    <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/pwt/themes/theme-proxmox-dark.css?ver=[% wtversion %]" />
       [%- END -%]
-    [%- END -%]  
+    [%- END -%]
     [% IF langfile %]
     <script type='text/javascript' src='/pve2/locale/pmg-lang-[% lang %].js'></script>
     [% ELSE %]
-- 
2.30.2

[pmg-devel] [PATCH pmg-api] proxy: make the "auto" theme the default

[Stefan Sterz]

by using the "auto" theme per default, the user's preferred theme is
used automatically.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/PMG/Service/pmgproxy.pm | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/PMG/Service/pmgproxy.pm b/src/PMG/Service/pmgproxy.pm
index 9b5ba52..310519a 100755
--- a/src/PMG/Service/pmgproxy.pm
+++ b/src/PMG/Service/pmgproxy.pm
@@ -230,6 +230,10 @@ sub get_index {
 	}
     }
 
+    if ($theme eq "") {
+	$theme = "auto"
+    }
+
     $token = PMG::Ticket::assemble_csrf_prevention_token($username)
 	if defined($username);
 
@@ -270,7 +274,6 @@ sub get_index {
 	wtversion => $wtversion,
 	quarantinelink => $quarantinelink,
 	theme => $theme,
-	auto => $theme == "auto",
     };
 
     my $template_name;
-- 
2.30.2

[pmg-devel] applied: [pve-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups Round 2

[Thomas Lamprecht]

Am 14/03/2023 um 15:01 schrieb Stefan Sterz:
> this theme switches the default theme to the 'auto' theme for
> all three producs (pve, pmg, pbs) in addition to two minor fix-ups
> 
> * for the widget toolkit a bit of brightness is added to the check-box
>   icons
> * in the pmg-gui the main logo in the mobile quarantine is styled
>   properly
> 
> note that the patches for pbs and pmg are meant as fix-ups for the yet
> to be applied patches from the initial dark theme series. if this is
> too inconvenient ill re-submit these patches once they are applied. if
> they are applied, squashing these into the previous commits might make
> sense, though.
> 
> Stefan Sterz (2):
>   utils: move to using the auto theme per default
>   dark-theme: increase contrast on check-boxes
> 
>  src/Utils.js                            | 4 ++--
>  src/proxmox-dark/scss/other/_icons.scss | 2 +-
>  2 files changed, 3 insertions(+), 3 deletions(-)
> 


applied series, thanks!