proxmox-mirrors/pve-manager
1
0
Fork 0
mirror of https://git.proxmox.com/git/pve-manager synced 2025-08-13 21:00:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

pveproxy/template: add support for switching themes

Browse Source 
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>
This commit is contained in:
Stefan Sterz 2023-03-08 17:40:07 +01:00 committed by Thomas Lamprecht
parent d975d810b4
commit 5137b16fd2
2 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
PVE/Service/pveproxy.pm
View File

@ -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

8
www/index.html.tpl
View File

@ -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 %]