[pve-devel] [PATCH manager v1 2/4] pveproxy/template: add support for switching themes

[Stefan Sterz <s.sterz@proxmox.com>]

load the dark theme only if requested through a cookie, also adds
support for the "auto" theme that uses the dark theme based on a
media query.

this requires a bump of the widget toolkit so the dark-theme css file
is available.

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

diff --git a/PVE/Service/pveproxy.pm b/PVE/Service/pveproxy.pm
index f73fdd6f..3fd76128 100755
--- a/PVE/Service/pveproxy.pm
+++ b/PVE/Service/pveproxy.pm
@@ -88,6 +88,7 @@ sub init {
     add_dirs($dirs, '/xtermjs/' => "$basedirs->{xtermjs}/");
     add_dirs($dirs, '/pwt/images/' => "$basedirs->{widgettoolkit}/images/");
     add_dirs($dirs, '/pwt/css/' => "$basedirs->{widgettoolkit}/css/");
+    add_dirs($dirs, '/pwt/themes/' => "$basedirs->{widgettoolkit}/themes/");
 
     $self->{server_config} = {
 	title => 'Proxmox VE API',
@@ -191,6 +192,7 @@ sub get_index {
     my $lang;
     my $username;
     my $token = 'null';
+    my $theme = "";
 
     if (my $cookie = $r->header('Cookie')) {
 	if (my $newlang = ($cookie =~ /(?:^|\s)PVELangCookie=([^;]*)/)[0]) {
@@ -198,6 +200,15 @@ sub get_index {
 		$lang = $newlang;
 	    }
 	}
+
+	if (my $newtheme = ($cookie =~ /(?:^|\s)PVEThemeCookie=([^;]*)/)[0]) {
+	    # theme names need to be kebab case, with each segment a maximum of 10 characters long
+	    # and at most 6 segments
+	    if ($newtheme =~ m/^[a-z]{1,10}(-[a-z]{1,10}){0,5}$/) {
+		$theme = $newtheme;
+	    }
+	}
+
 	my $ticket = PVE::APIServer::Formatter::extract_auth_value($cookie, $server->{cookie_name});
 	if (($username = PVE::AccessControl::verify_ticket($ticket, 1))) {
 	    $token = PVE::AccessControl::assemble_csrf_prevention_token($username);
@@ -252,6 +263,8 @@ sub get_index {
 	debug => $debug,
 	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 0c819977..be31dd40 100644
--- a/www/index.html.tpl
+++ b/www/index.html.tpl
@@ -12,6 +12,14 @@
     <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 %]
+    <link rel="stylesheet" type="text/css" href="/pwt/themes/theme-[% theme %].css?ver=[% wtversion %]" />
+      [%- END -%]
+    [%- END -%]
+
     [% IF langfile %]
     <script type='text/javascript' src='/pve2/locale/pve-lang-[% lang %].js?ver=[% version %]'></script>
     [%- ELSE %]
-- 
2.30.2