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

[pve-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

[pve-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

[pve-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

[pve-devel] [PATCH manager] pveproxy/template: switch to using the "auto" theme per default

[Stefan Sterz]

the auto theme uses media queries to detect a users preferred theme,
switch to using it per default instead of the light theme.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 PVE/Service/pveproxy.pm | 5 ++++-
 www/index.html.tpl      | 8 ++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/PVE/Service/pveproxy.pm b/PVE/Service/pveproxy.pm
index 3fd76128..7b305f76 100755
--- a/PVE/Service/pveproxy.pm
+++ b/PVE/Service/pveproxy.pm
@@ -215,6 +215,10 @@ sub get_index {
 	}
     }
 
+    if ($theme eq "") {
+	$theme = "auto"
+    }
+
     if (!$lang) {
 	my $dc_conf = PVE::Cluster::cfs_read_file('datacenter.cfg');
 	$lang = $dc_conf->{language} // 'en';
@@ -264,7 +268,6 @@ sub get_index {
 	version => "$version",
 	wtversion => $wtversion,
 	theme => $theme,
-	auto => $theme == "auto",
     };
 
     # by default, load the normal index
diff --git a/www/index.html.tpl b/www/index.html.tpl
index be31dd40..b07ce5f1 100644
--- a/www/index.html.tpl
+++ b/www/index.html.tpl
@@ -12,11 +12,11 @@
     <link rel="stylesheet" type="text/css" href="/pve2/fa/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" href="/pve2/css/ext6-pve.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 -%]
 
-- 
2.30.2

[pve-devel] applied: [PATCH manager] pveproxy/template: switch to using the "auto" theme per default

[Thomas Lamprecht]

Am 14/03/2023 um 15:01 schrieb Stefan Sterz:
> the auto theme uses media queries to detect a users preferred theme,
> switch to using it per default instead of the light theme.
> 
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
>  PVE/Service/pveproxy.pm | 5 ++++-
>  www/index.html.tpl      | 8 ++++----
>  2 files changed, 8 insertions(+), 5 deletions(-)
> 
>

applied, thanks!

[pve-devel] applied: [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!