* [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme
@ 2023-03-08 16:18 Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
` (12 more replies)
0 siblings, 13 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:18 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
this patch series aims to add support for a dark theme to all current
proxmox products. including:
* proxmox virtual environment web gui & api viewer
* proxmox backup server gui & api viewer
* proxmox mail gateway gui, api viewer & (mobile) quarantine
this patch series is split into several parts. the first concerns the
widget toolkit and adds the necessary files and adaptions needed
accross all three products. the other three parts integrate the new
dark theme into pve, pbs and pmg and also adds changes needed by each
product.
part 1: widget toolkit
the first commit adds styles that give the main gui a "dark"
appearance. this includes adjusting the icons and other images as
well as all backgrounds text and link colors. the second commit
removes certain hard-coded background colors that are set via js.
these don't behave properly in the dark theme and the gui behaves
properly without them, so they are removed.
the third and fourth commit make it possible for charts and gauges to
switch their colors based on the current theme. the fifth commit adds
a theme switcher widget that allows switching the current theme and
then sets a cookie accordingly.
the last commit is only relevant for the proxmox mail gateway and
enables the proposed "theme switcher" function. this allows users to
enable or disable a filter over the email preview in the quarantine.
if the filter is enabled the email will have it's brightness reduced
and the colors will be inverted. thus, plain text emails shouldn't
appear too bright
part 2: proxmox virtual environment
the first commit for pve adds the theme switcher to the gui, the
second adjusts the pveproxy template to properly handle the cookie
set by the theme switcher. the third removes unnecessary hard-coded
background colors and the forth add support for the charts used in
pve only.
the fifth commit concern pve-docs and adds support for the dark theme
in the api viewer.
part 3: proxmox backup server
the commits for proxmox backup server first add the theme switcher,
then removes hard-coded backgrounds and finally add dark theme support
to the api viewer.
part 4: proxmox mail gateway
the first commit concerns the api and let's it handle cookie properly.
the next five commits adjust gui to first add a theme switcher, then
style the spam info grid, remove hard-coded white backgrounds, style
the hourly mail chart, and enable the dark mode in the mobile
quarantine.
the second-to-last commit enables the theme switching mechanism for
the quarantine mail preview. this part could be dropped in favor of
extending the preview endpoint to add some styles to the preview that
handle a dark theme. this would have the added benefit of also working
in the mobile quarantine.
the last commit for the mail gateway enables the dark theme in the api
viewer.
Daniel Tschlatscher (2):
dark-theme: add initial version of the proxmox-dark theme
util/window/form: add a theme selector
Stefan Sterz (4):
subscription/summary/backup: stop setting the background color
gauge widget: add support for a dark theme and dynamic theme switching
rrd chart: add support for the dark theme and dynamic theme switching
dark-theme: add support for the pmg quarantine theme toggle
debian/control | 1 +
src/Makefile | 4 +-
src/Utils.js | 25 +++
src/defines.mk | 1 +
src/form/ThemeSelector.js | 6 +
src/node/APT.js | 1 -
src/panel/GaugeWidget.js | 45 ++++
src/panel/RRDChart.js | 37 ++++
src/proxmox-dark/Makefile | 47 ++++
src/proxmox-dark/scss/ProxmoxDark.scss | 37 ++++
src/proxmox-dark/scss/abstracts/_mixins.scss | 12 ++
.../scss/abstracts/_variables.scss | 67 ++++++
src/proxmox-dark/scss/extjs/_body.scss | 23 ++
src/proxmox-dark/scss/extjs/_grid.scss | 146 +++++++++++++
src/proxmox-dark/scss/extjs/_menu.scss | 39 ++++
src/proxmox-dark/scss/extjs/_panel.scss | 25 +++
.../scss/extjs/_presentation.scss | 14 ++
src/proxmox-dark/scss/extjs/_progress.scss | 19 ++
src/proxmox-dark/scss/extjs/_splitter.scss | 18 ++
src/proxmox-dark/scss/extjs/_tabbar.scss | 43 ++++
src/proxmox-dark/scss/extjs/_tip.scss | 18 ++
src/proxmox-dark/scss/extjs/_toolbar.scss | 21 ++
src/proxmox-dark/scss/extjs/_treepanel.scss | 24 +++
src/proxmox-dark/scss/extjs/_window.scss | 39 ++++
src/proxmox-dark/scss/extjs/form/_button.scss | 57 +++++
.../scss/extjs/form/_combobox.scss | 23 ++
.../scss/extjs/form/_formfield.scss | 40 ++++
src/proxmox-dark/scss/other/_charts.scss | 39 ++++
src/proxmox-dark/scss/other/_icons.scss | 200 ++++++++++++++++++
.../scss/proxmox/_datepicker.scss | 61 ++++++
src/proxmox-dark/scss/proxmox/_general.scss | 56 +++++
.../scss/proxmox/_helpbutton.scss | 16 ++
.../scss/proxmox/_loadingindicator.scss | 14 ++
src/proxmox-dark/scss/proxmox/_markdown.scss | 31 +++
src/proxmox-dark/scss/proxmox/_nodes.scss | 9 +
.../scss/proxmox/_quarantine.scss | 53 +++++
src/proxmox-dark/scss/proxmox/_storages.scss | 19 ++
src/proxmox-dark/scss/proxmox/_tags.scss | 14 ++
src/window/AddTotp.js | 1 -
src/window/DiskSmart.js | 1 -
src/window/PackageVersions.js | 1 -
src/window/ThemeEdit.js | 49 +++++
42 files changed, 1391 insertions(+), 5 deletions(-)
create mode 100644 src/form/ThemeSelector.js
create mode 100644 src/proxmox-dark/Makefile
create mode 100644 src/proxmox-dark/scss/ProxmoxDark.scss
create mode 100644 src/proxmox-dark/scss/abstracts/_mixins.scss
create mode 100644 src/proxmox-dark/scss/abstracts/_variables.scss
create mode 100644 src/proxmox-dark/scss/extjs/_body.scss
create mode 100644 src/proxmox-dark/scss/extjs/_grid.scss
create mode 100644 src/proxmox-dark/scss/extjs/_menu.scss
create mode 100644 src/proxmox-dark/scss/extjs/_panel.scss
create mode 100644 src/proxmox-dark/scss/extjs/_presentation.scss
create mode 100644 src/proxmox-dark/scss/extjs/_progress.scss
create mode 100644 src/proxmox-dark/scss/extjs/_splitter.scss
create mode 100644 src/proxmox-dark/scss/extjs/_tabbar.scss
create mode 100644 src/proxmox-dark/scss/extjs/_tip.scss
create mode 100644 src/proxmox-dark/scss/extjs/_toolbar.scss
create mode 100644 src/proxmox-dark/scss/extjs/_treepanel.scss
create mode 100644 src/proxmox-dark/scss/extjs/_window.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_button.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_combobox.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_formfield.scss
create mode 100644 src/proxmox-dark/scss/other/_charts.scss
create mode 100644 src/proxmox-dark/scss/other/_icons.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_datepicker.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_general.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_helpbutton.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_loadingindicator.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_markdown.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_nodes.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_quarantine.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_storages.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_tags.scss
create mode 100644 src/window/ThemeEdit.js
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
@ 2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
` (11 subsequent siblings)
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:25 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
this patch series aims to add support for a dark theme to all current
proxmox products. including:
* proxmox virtual environment web gui & api viewer
* proxmox backup server gui & api viewer
* proxmox mail gateway gui, api viewer & (mobile) quarantine
this patch series is split into several parts. the first concerns the
widget toolkit and adds the necessary files and adaptions needed
accross all three products. the other three parts integrate the new
dark theme into pve, pbs and pmg and also adds changes needed by each
product.
part 1: widget toolkit
the first commit adds styles that give the main gui a "dark"
appearance. this includes adjusting the icons and other images as
well as all backgrounds text and link colors. the second commit
removes certain hard-coded background colors that are set via js.
these don't behave properly in the dark theme and the gui behaves
properly without them, so they are removed.
the third and fourth commit make it possible for charts and gauges to
switch their colors based on the current theme. the fifth commit adds
a theme switcher widget that allows switching the current theme and
then sets a cookie accordingly.
the last commit is only relevant for the proxmox mail gateway and
enables the proposed "theme switcher" function. this allows users to
enable or disable a filter over the email preview in the quarantine.
if the filter is enabled the email will have it's brightness reduced
and the colors will be inverted. thus, plain text emails shouldn't
appear too bright
part 2: proxmox virtual environment
the first commit for pve adds the theme switcher to the gui, the
second adjusts the pveproxy template to properly handle the cookie
set by the theme switcher. the third removes unnecessary hard-coded
background colors and the forth add support for the charts used in
pve only.
the fifth commit concern pve-docs and adds support for the dark theme
in the api viewer.
part 3: proxmox backup server
the commits for proxmox backup server first add the theme switcher,
then removes hard-coded backgrounds and finally add dark theme support
to the api viewer.
part 4: proxmox mail gateway
the first commit concerns the api and let's it handle cookie properly.
the next five commits adjust gui to first add a theme switcher, then
style the spam info grid, remove hard-coded white backgrounds, style
the hourly mail chart, and enable the dark mode in the mobile
quarantine.
the second-to-last commit enables the theme switching mechanism for
the quarantine mail preview. this part could be dropped in favor of
extending the preview endpoint to add some styles to the preview that
handle a dark theme. this would have the added benefit of also working
in the mobile quarantine.
the last commit for the mail gateway enables the dark theme in the api
viewer.
Daniel Tschlatscher (2):
dark-theme: add initial version of the proxmox-dark theme
util/window/form: add a theme selector
Stefan Sterz (4):
subscription/summary/backup: stop setting the background color
gauge widget: add support for a dark theme and dynamic theme switching
rrd chart: add support for the dark theme and dynamic theme switching
dark-theme: add support for the pmg quarantine theme toggle
debian/control | 1 +
src/Makefile | 4 +-
src/Utils.js | 25 +++
src/defines.mk | 1 +
src/form/ThemeSelector.js | 6 +
src/node/APT.js | 1 -
src/panel/GaugeWidget.js | 45 ++++
src/panel/RRDChart.js | 37 ++++
src/proxmox-dark/Makefile | 47 ++++
src/proxmox-dark/scss/ProxmoxDark.scss | 37 ++++
src/proxmox-dark/scss/abstracts/_mixins.scss | 12 ++
.../scss/abstracts/_variables.scss | 67 ++++++
src/proxmox-dark/scss/extjs/_body.scss | 23 ++
src/proxmox-dark/scss/extjs/_grid.scss | 146 +++++++++++++
src/proxmox-dark/scss/extjs/_menu.scss | 39 ++++
src/proxmox-dark/scss/extjs/_panel.scss | 25 +++
.../scss/extjs/_presentation.scss | 14 ++
src/proxmox-dark/scss/extjs/_progress.scss | 19 ++
src/proxmox-dark/scss/extjs/_splitter.scss | 18 ++
src/proxmox-dark/scss/extjs/_tabbar.scss | 43 ++++
src/proxmox-dark/scss/extjs/_tip.scss | 18 ++
src/proxmox-dark/scss/extjs/_toolbar.scss | 21 ++
src/proxmox-dark/scss/extjs/_treepanel.scss | 24 +++
src/proxmox-dark/scss/extjs/_window.scss | 39 ++++
src/proxmox-dark/scss/extjs/form/_button.scss | 57 +++++
.../scss/extjs/form/_combobox.scss | 23 ++
.../scss/extjs/form/_formfield.scss | 40 ++++
src/proxmox-dark/scss/other/_charts.scss | 39 ++++
src/proxmox-dark/scss/other/_icons.scss | 200 ++++++++++++++++++
.../scss/proxmox/_datepicker.scss | 61 ++++++
src/proxmox-dark/scss/proxmox/_general.scss | 56 +++++
.../scss/proxmox/_helpbutton.scss | 16 ++
.../scss/proxmox/_loadingindicator.scss | 14 ++
src/proxmox-dark/scss/proxmox/_markdown.scss | 31 +++
src/proxmox-dark/scss/proxmox/_nodes.scss | 9 +
.../scss/proxmox/_quarantine.scss | 53 +++++
src/proxmox-dark/scss/proxmox/_storages.scss | 19 ++
src/proxmox-dark/scss/proxmox/_tags.scss | 14 ++
src/window/AddTotp.js | 1 -
src/window/DiskSmart.js | 1 -
src/window/PackageVersions.js | 1 -
src/window/ThemeEdit.js | 49 +++++
42 files changed, 1391 insertions(+), 5 deletions(-)
create mode 100644 src/form/ThemeSelector.js
create mode 100644 src/proxmox-dark/Makefile
create mode 100644 src/proxmox-dark/scss/ProxmoxDark.scss
create mode 100644 src/proxmox-dark/scss/abstracts/_mixins.scss
create mode 100644 src/proxmox-dark/scss/abstracts/_variables.scss
create mode 100644 src/proxmox-dark/scss/extjs/_body.scss
create mode 100644 src/proxmox-dark/scss/extjs/_grid.scss
create mode 100644 src/proxmox-dark/scss/extjs/_menu.scss
create mode 100644 src/proxmox-dark/scss/extjs/_panel.scss
create mode 100644 src/proxmox-dark/scss/extjs/_presentation.scss
create mode 100644 src/proxmox-dark/scss/extjs/_progress.scss
create mode 100644 src/proxmox-dark/scss/extjs/_splitter.scss
create mode 100644 src/proxmox-dark/scss/extjs/_tabbar.scss
create mode 100644 src/proxmox-dark/scss/extjs/_tip.scss
create mode 100644 src/proxmox-dark/scss/extjs/_toolbar.scss
create mode 100644 src/proxmox-dark/scss/extjs/_treepanel.scss
create mode 100644 src/proxmox-dark/scss/extjs/_window.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_button.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_combobox.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_formfield.scss
create mode 100644 src/proxmox-dark/scss/other/_charts.scss
create mode 100644 src/proxmox-dark/scss/other/_icons.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_datepicker.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_general.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_helpbutton.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_loadingindicator.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_markdown.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_nodes.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_quarantine.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_storages.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_tags.scss
create mode 100644 src/window/ThemeEdit.js
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
@ 2023-03-08 16:33 ` Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
` (10 subsequent siblings)
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:33 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
From: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
adds an initial version of a dark theme for all proxmox products. the
theme works by simply loading an additional css file that adjust the
colors of the original theme "crisp" to be more suitable for a dark
theme.
the theme itself is written in scss, so we need to add sassc as a
build dependency. while sassc is deprecated, it is still maintained in
the debian repositories and, thus, needs no additional packaging on
our end.
this version adds the following on-top of Daniel Tschlatscher's
original draft:
* removes checked-in build artifacts and other stuff that shouldn't be
tracked
* code clean-up and removal of redundant code
* refactors:
* icon styling
* color handling for charts (moved to css variables)
* color variables, consolidates them and makes the "functional"
* color values, improves contrast and makes the theme appear more
consistent
* using the "theme-" prefix
* adds:
* markdown note styles
* combo-box trigger styles
* even more icon styles (e.g., template icons, check boxes etc.)
* loading spinners styles
* number field up and down arrow styles
* an additional auto theme that switches between light and dark
theme dynamically
* widget toolkit hints
* ceph install mask
* grid group headers
* color to toggled buttons
* date picker styles
* drag and drop proxy styles
* fixes:
* contrast on control elements for "scrollable" sidebars
* make the general appearance closer to the light theme ("crisp")
* buttons (when hovered, toggled etc)
* background masking (e.g., when showing the log-in form)
* grid header separator (adds an outline)
* separator lines in some menus
* makes the custom unknown icon more discernible
* makes headers more readable
* color adjustments to several components for consistency
* reduces brightness of dividers in toolbars
* border color on chart legend elements
* removes a black border from docked toolbars (e.g., tag edit)
* dims the "invalid" color to appear less aggressive
* add hover effects in grids and make them consistent with "crisp"
* summary rows
* selected and hovered elements in boundlists
* row numberers in grids
* contrast of links in hints
* ceph overview border colors (e.g., OSD in/out/up/down grid)
* bottom splitter contrast in certain situations
* tag visibility
* pbs compatibility (help buttons stylings, icons, tabs)
* pmg compatibility:
* remove border around the spanning element in the header
* style spam score grid
* style tracking center rows
* add appropriate colors to buttons in the quarantine
* style mail-info element in the quarantine
Co-authored-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Co-authored-by: Stefan Sterz <s.sterz@proxmox.com>
Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
debian/control | 1 +
src/Makefile | 2 +-
src/defines.mk | 1 +
src/proxmox-dark/Makefile | 47 ++++
src/proxmox-dark/scss/ProxmoxDark.scss | 37 ++++
src/proxmox-dark/scss/abstracts/_mixins.scss | 12 ++
.../scss/abstracts/_variables.scss | 67 ++++++
src/proxmox-dark/scss/extjs/_body.scss | 23 ++
src/proxmox-dark/scss/extjs/_grid.scss | 146 +++++++++++++
| 39 ++++
src/proxmox-dark/scss/extjs/_panel.scss | 25 +++
.../scss/extjs/_presentation.scss | 14 ++
src/proxmox-dark/scss/extjs/_progress.scss | 19 ++
src/proxmox-dark/scss/extjs/_splitter.scss | 18 ++
src/proxmox-dark/scss/extjs/_tabbar.scss | 43 ++++
src/proxmox-dark/scss/extjs/_tip.scss | 18 ++
src/proxmox-dark/scss/extjs/_toolbar.scss | 21 ++
src/proxmox-dark/scss/extjs/_treepanel.scss | 24 +++
src/proxmox-dark/scss/extjs/_window.scss | 39 ++++
src/proxmox-dark/scss/extjs/form/_button.scss | 57 +++++
.../scss/extjs/form/_combobox.scss | 23 ++
.../scss/extjs/form/_formfield.scss | 40 ++++
src/proxmox-dark/scss/other/_charts.scss | 39 ++++
src/proxmox-dark/scss/other/_icons.scss | 200 ++++++++++++++++++
.../scss/proxmox/_datepicker.scss | 61 ++++++
src/proxmox-dark/scss/proxmox/_general.scss | 56 +++++
.../scss/proxmox/_helpbutton.scss | 16 ++
.../scss/proxmox/_loadingindicator.scss | 14 ++
src/proxmox-dark/scss/proxmox/_markdown.scss | 31 +++
src/proxmox-dark/scss/proxmox/_nodes.scss | 9 +
.../scss/proxmox/_quarantine.scss | 47 ++++
src/proxmox-dark/scss/proxmox/_storages.scss | 19 ++
src/proxmox-dark/scss/proxmox/_tags.scss | 14 ++
33 files changed, 1221 insertions(+), 1 deletion(-)
create mode 100644 src/proxmox-dark/Makefile
create mode 100644 src/proxmox-dark/scss/ProxmoxDark.scss
create mode 100644 src/proxmox-dark/scss/abstracts/_mixins.scss
create mode 100644 src/proxmox-dark/scss/abstracts/_variables.scss
create mode 100644 src/proxmox-dark/scss/extjs/_body.scss
create mode 100644 src/proxmox-dark/scss/extjs/_grid.scss
create mode 100644 src/proxmox-dark/scss/extjs/_menu.scss
create mode 100644 src/proxmox-dark/scss/extjs/_panel.scss
create mode 100644 src/proxmox-dark/scss/extjs/_presentation.scss
create mode 100644 src/proxmox-dark/scss/extjs/_progress.scss
create mode 100644 src/proxmox-dark/scss/extjs/_splitter.scss
create mode 100644 src/proxmox-dark/scss/extjs/_tabbar.scss
create mode 100644 src/proxmox-dark/scss/extjs/_tip.scss
create mode 100644 src/proxmox-dark/scss/extjs/_toolbar.scss
create mode 100644 src/proxmox-dark/scss/extjs/_treepanel.scss
create mode 100644 src/proxmox-dark/scss/extjs/_window.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_button.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_combobox.scss
create mode 100644 src/proxmox-dark/scss/extjs/form/_formfield.scss
create mode 100644 src/proxmox-dark/scss/other/_charts.scss
create mode 100644 src/proxmox-dark/scss/other/_icons.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_datepicker.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_general.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_helpbutton.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_loadingindicator.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_markdown.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_nodes.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_quarantine.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_storages.scss
create mode 100644 src/proxmox-dark/scss/proxmox/_tags.scss
diff --git a/debian/control b/debian/control
index 41093f3..71c48c4 100644
--- a/debian/control
+++ b/debian/control
@@ -5,6 +5,7 @@ Maintainer: Proxmox Support Team <support@proxmox.com>
Build-Depends: debhelper (>= 12~),
libjs-marked,
pve-eslint (>= 7.28.0),
+ sassc,
Standards-Version: 4.5.1
Homepage: https://www.proxmox.com
diff --git a/src/Makefile b/src/Makefile
index 95da5aa..54727f6 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -1,6 +1,6 @@
include defines.mk
-SUBDIRS= css images
+SUBDIRS= css images proxmox-dark
# bundle it for now from the libjs-marked debian package to avoid touching our proxies file mapper,
# we could also just ship a link to the packages file and load from same path as the widget-toolkit
diff --git a/src/defines.mk b/src/defines.mk
index d6bdd2c..2a65e9d 100644
--- a/src/defines.mk
+++ b/src/defines.mk
@@ -3,3 +3,4 @@ DOCDIR=${DESTDIR}/usr/share/doc/${PACKAGE}
WWWBASEDIR=${DESTDIR}/usr/share/javascript/${PACKAGE}
WWWCSSDIR=${WWWBASEDIR}/css
WWWIMAGESDIR=${WWWBASEDIR}/images
+WWWTHEMEDIR=${WWWBASEDIR}/themes
diff --git a/src/proxmox-dark/Makefile b/src/proxmox-dark/Makefile
new file mode 100644
index 0000000..2ac6f22
--- /dev/null
+++ b/src/proxmox-dark/Makefile
@@ -0,0 +1,47 @@
+include ../defines.mk
+
+SCSSSRC=scss/ProxmoxDark.scss \
+ scss/abstracts/_mixins.scss \
+ scss/abstracts/_variables.scss \
+ scss/extjs/_body.scss \
+ scss/extjs/form/_button.scss \
+ scss/extjs/form/_combobox.scss \
+ scss/extjs/form/_formfield.scss \
+ scss/extjs/_grid.scss \
+ scss/extjs/_menu.scss \
+ scss/extjs/_panel.scss \
+ scss/extjs/_presentation.scss \
+ scss/extjs/_progress.scss \
+ scss/extjs/_splitter.scss \
+ scss/extjs/_tabbar.scss \
+ scss/extjs/_tip.scss \
+ scss/extjs/_toolbar.scss \
+ scss/extjs/_treepanel.scss \
+ scss/extjs/_window.scss \
+ scss/other/_charts.scss \
+ scss/other/_icons.scss \
+ scss/proxmox/_general.scss \
+ scss/proxmox/_helpbutton.scss \
+ scss/proxmox/_loadingindicator.scss \
+ scss/proxmox/_markdown.scss \
+ scss/proxmox/_nodes.scss \
+ scss/proxmox/_quarantine.scss \
+ scss/proxmox/_storages.scss \
+ scss/proxmox/_tags.scss \
+ scss/proxmox/_datepicker.scss
+
+.PHONY: all
+all: theme-proxmox-dark.css
+
+.PHONY: install
+install: theme-proxmox-dark.css
+ install -d ${WWWTHEMEDIR}/
+ install -m 0664 theme-proxmox-dark.css ${WWWTHEMEDIR}/
+
+theme-proxmox-dark.css: ${SCSSSRC}
+ sassc -t compressed $< $@.tmp
+ mv $@.tmp $@
+
+.PHONY: clean
+clean:
+ rm -rf theme-proxmox-dark.css
diff --git a/src/proxmox-dark/scss/ProxmoxDark.scss b/src/proxmox-dark/scss/ProxmoxDark.scss
new file mode 100644
index 0000000..60e69a8
--- /dev/null
+++ b/src/proxmox-dark/scss/ProxmoxDark.scss
@@ -0,0 +1,37 @@
+@charset "utf-8";
+
+// Abstracts
+@import "abstracts/mixins";
+@import "abstracts/variables";
+
+// Chart, Icon, Keyboar-mode fixups
+@import "other/charts";
+@import "other/icons";
+
+// ExtJS re-stylings
+@import "extjs/form/button";
+@import "extjs/form/combobox";
+@import "extjs/form/formfield";
+@import "extjs/grid";
+@import "extjs/menu";
+@import "extjs/panel";
+@import "extjs/progress";
+@import "extjs/splitter";
+@import "extjs/tabbar";
+@import "extjs/tip";
+@import "extjs/toolbar";
+@import "extjs/treepanel";
+@import "extjs/window";
+@import "extjs/body";
+@import "extjs/presentation";
+
+// Proxmox re-stylings
+@import "proxmox/general";
+@import "proxmox/helpbutton";
+@import "proxmox/loadingindicator";
+@import "proxmox/markdown";
+@import "proxmox/nodes";
+@import "proxmox/quarantine";
+@import "proxmox/storages";
+@import "proxmox/tags";
+@import "proxmox/datepicker";
diff --git a/src/proxmox-dark/scss/abstracts/_mixins.scss b/src/proxmox-dark/scss/abstracts/_mixins.scss
new file mode 100644
index 0000000..570a783
--- /dev/null
+++ b/src/proxmox-dark/scss/abstracts/_mixins.scss
@@ -0,0 +1,12 @@
+// A border to the left and on top of the content panels for the
+// selected resource
+@mixin content-border {
+ border-top: solid 3px $background-darkest;
+ border-left: solid 3px $background-darkest;
+}
+
+// selected items in dropdown etc
+@mixin selection {
+ background-color: $selection-background-color;
+ color: $selection-background-text-color;
+}
diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
new file mode 100644
index 0000000..96581df
--- /dev/null
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -0,0 +1,67 @@
+// Primary colors
+$primary-color: hsl(205deg, 100%, 32.25%);
+$primary-light: hsl(205deg, 100%, 40.5%);
+$primary-dark: hsl(205deg, 100%, 25%);
+
+// Hightlighted Text (Links, Headers, etc.)
+$highlighted-text: hsl(205deg, 100%, 65%);
+$highlighted-text-alt: hsl(205deg, 100%, 80%);
+$highlighted-text-crit: hsl(360deg, 100%, 65%);
+
+// Icon and Text colors
+$text-color: hsl(0deg, 0%, 95%);
+$text-color-inactive: hsl(0deg, 0%, 60%);
+$icon-color: hsl(0deg, 0%, 90%);
+$icon-color-alt: hsl(0deg, 0%, 55%);
+
+// Borders
+$border-color: hsl(0deg, 0%, 40%);
+$border-color-alt: hsl(0deg, 0%, 25%);
+
+// Backgrounds
+$content-background-color: hsl(0deg, 0%, 20%);
+$content-background-selected: hsl(0deg, 0%, 30%);
+$background-dark: hsl(0deg, 0%, 20%);
+$background-darker: hsl(0deg, 0%, 15%);
+$background-darkest: hsl(0deg, 0%, 10%);
+$background-invalid: hsl(360deg, 60%, 30%);
+$background-warning: hsl(40deg, 100%, 30%);
+
+// Buttons
+$neutral-button-color: hsl(0deg, 0%, 35%);
+$neutral-button-color-alt: hsl(0deg, 0%, 55%);
+$neutral-button-text-color: hsl(0deg, 0%, 100%);
+$neutral-button-icon-color: $neutral-button-text-color;
+
+// Help Buttons
+$help-button-color: hsl(0deg, 0%, 70%);
+$help-button-color-alt: hsl(0deg, 0%, 60%);
+$help-button-text-color: hsl(0deg, 0%, 10%);
+$help-button-icon-color: $help-button-text-color;
+
+// Selection Colors
+$selection-background-color: hsl(0deg, 0%, 35%);
+$selection-background-text-color: hsl(0deg, 0%, 100%);
+
+// Other
+$form-field-body-color: $background-dark;
+$bottom-splitter-color: hsl(0deg, 0%, 5%);
+
+// Some icons are black and do not respect the 'color' style property.
+// For the dark mode these can be turned grey or white with the
+// 'filter: invert(value)' attribute
+$icon-brightness: lightness($icon-color);
+
+// Spam score colors
+
+// for spam scores with an absolute score >= 3
+$spam-high-neg: hsl(205deg, 65%, 20%);
+$spam-high-pos: hsl(360deg, 55%, 20%);
+
+// for spam scores with an absolute score between 0.1 and 3
+$spam-mid-neg: hsl(205deg, 65%, 30%);
+$spam-mid-pos: hsl(360deg, 55%, 30%);
+
+// for spam scores with an absolute score <= 0.1
+$spam-low-neg: hsl(205deg, 65%, 40%);
+$spam-low-pos: hsl(360deg, 55%, 40%);
diff --git a/src/proxmox-dark/scss/extjs/_body.scss b/src/proxmox-dark/scss/extjs/_body.scss
new file mode 100644
index 0000000..2fc6161
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_body.scss
@@ -0,0 +1,23 @@
+// Chrome 81, Firefox 96 and Safari 13 support a dark version of the
+// scrollbar and form controls source
+// https://stackoverflow.com/q/65940522
+:root {
+ color-scheme: dark;
+}
+
+.x-body {
+ color: $text-color;
+ background-color: $background-darkest;
+}
+
+// Should be the absolute background of the document
+.x-viewport > .x-body {
+ background-color: $background-darkest;
+}
+
+// necessary for some masks to work properly (e.g. when hidding the
+// attachment grid in pmg)
+body.x-border-layout-ct,
+div.x-border-layout-ct {
+ background-color: $background-darkest;
+}
diff --git a/src/proxmox-dark/scss/extjs/_grid.scss b/src/proxmox-dark/scss/extjs/_grid.scss
new file mode 100644
index 0000000..77872b0
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_grid.scss
@@ -0,0 +1,146 @@
+.x-column-header {
+ border-color: $border-color-alt;
+}
+
+.x-grid-item,
+.x-column-header-default,
+// the row number field (e.g. in the ipsets in pve)
+.x-grid-cell-row-numberer {
+ color: $text-color;
+ background-color: $background-darker;
+}
+
+// Trigger in grid/table header cells
+.x-column-header-trigger {
+ border-color: $border-color;
+}
+
+.x-grid-cell-special {
+ border-color: $border-color-alt;
+}
+
+.x-grid-group-hd {
+ background-color: $background-darker;
+ border-color: $border-color-alt;
+}
+
+.x-grid-group-title {
+ color: $text-color;
+}
+
+// Border-top in tables
+.x-grid-header-ct {
+ border: solid 1px $background-dark;
+ background-color: $background-dark;
+}
+
+// alternating row colors
+.x-grid-item-alt {
+ background-color: $background-darkest;
+}
+
+.x-grid-with-row-lines {
+ .x-grid-item {
+ border-color: $border-color-alt;
+ border-right: 0;
+
+ // A border at the bottom of tables
+ &:last-child {
+ border-color: $border-color-alt;
+ }
+
+ // A border at the top of tables
+ &:first-child {
+ border-color: $border-color-alt;
+ }
+
+ // hovered row in a grid
+ &.x-grid-item-over,
+ &.x-grid-item-selected {
+ background-color: $selection-background-color;
+ border-color: $border-color-alt;
+ }
+ }
+
+ // borders on selected elements
+ .x-grid-item-selected + .x-grid-item,
+ .x-grid-item-over + .x-grid-item {
+ border-color: $border-color-alt;
+ }
+}
+
+// Sometimes a selected node in the ResourceTree loses the
+// selection-background-color
+.x-grid-item-over,
+.x-grid-item-selected {
+ // Otherwise .x-grid-item overrides the background color
+ background-color: $selection-background-color;
+}
+
+// Hovering over a grid/table header cell
+.x-column-header-over,
+// When opening the sort/settings header of a table/grid header cell
+.x-column-header-open,
+.x-column-header-last .x-column-header-over .x-column-header-trigger, {
+ background-color: $content-background-selected;
+}
+
+// header element that the grid is currently sorted by
+.x-column-header-sort-ASC,
+.x-column-header-sort-DESC {
+ background-color: $primary-dark;
+}
+
+// summary rows (e.g. ceph pools last row)
+.x-grid-row-summary {
+ .x-grid-cell,
+ .x-grid-rowwrap,
+ .x-grid-cell-rowbody {
+ border-color: $border-color-alt;
+ background-color: $background-darker;
+ }
+}
+
+.x-grid-with-col-lines {
+ .x-grid-cell,
+ .x-grid-item-over .x-grid-cell,
+ .x-grid-item-selected .x-grid-cell {
+ border-color: $border-color-alt;
+ }
+}
+
+// drag and drop proxy
+.x-dd-drag-proxy {
+ background-color: $background-darkest;
+ border-color: $border-color-alt;
+ color: $text-color;
+}
+
+.x-keyboard-mode .x-grid-item-focused {
+ @include selection;
+
+ .x-grid-cell-inner::before {
+ border-color: $primary-color;
+ }
+}
+
+// Grid/table headers that are selected and active
+.x-keyboard-mode .x-column-header.x-column-header-focus {
+ color: $text-color;
+
+ // Elements in table
+ .x-column-header-inner::after {
+ border-color: $primary-color;
+ }
+}
+
+.x-keyboard-mode .proxmox-invalid-row .x-grid-item-focused {
+ background-color: $background-invalid;
+}
+
+// As far as I can tell only used under Node > "System" >
+// "Certificates"
+.x-grid-empty {
+ background-color: $background-darker;
+ color: $text-color;
+}
--git a/src/proxmox-dark/scss/extjs/_menu.scss b/src/proxmox-dark/scss/extjs/_menu.scss
new file mode 100644
index 0000000..74be901
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_menu.scss
@@ -0,0 +1,39 @@
+.x-menu-default {
+ border-color: $form-field-body-color;
+}
+
+.x-menu-body-default {
+ background-color: $form-field-body-color;
+}
+
+// E.g. the content menu in the resource tree displays a header
+.x-menu-header {
+ background-color: $primary-color;
+}
+
+.x-menu-item-default {
+ // Horizontal divider in menu (e.g. in UserInfo above "Logout")
+ &.x-menu-item-separator {
+ background-color: $background-dark;
+ border-color: $border-color;
+ }
+
+ // When hovering over a menu item
+ &.x-menu-item-focus {
+ @include selection;
+ }
+}
+
+.x-menu-item-text-default {
+ color: $text-color;
+}
+
+.x-menu-item-icon-default {
+ color: $icon-color;
+}
+
+// Vertical divider (e.g. in UserInfo between icons and text)
+.x-menu-icon-separator-default {
+ background-color: $background-dark;
+ border-color: $border-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/_panel.scss b/src/proxmox-dark/scss/extjs/_panel.scss
new file mode 100644
index 0000000..5344c8f
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_panel.scss
@@ -0,0 +1,25 @@
+.x-panel-header-default {
+ 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%);
+ }
+
+ .x-tool-over .x-tool-tool-el {
+ filter: brightness(140%);
+ }
+}
+
+.x-panel-header-title-default {
+ color: $highlighted-text;
+}
+
+.x-panel-body-default {
+ background-color: $background-darker;
+ border-color: $border-color-alt;
+ color: $text-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
new file mode 100644
index 0000000..c7d3c8f
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -0,0 +1,14 @@
+// The mask that is applied when the window is unaccessible (Login
+// screen, Loading, ...)
+.x-mask {
+ background-color: $background-darker;
+ opacity: 0.85;
+}
+
+// Shadows of floating windows like window modals, form selectors and
+// message boxes
+.x-css-shadow {
+ // the additional styling from the pve css overwrites the setting on
+ // the element with "!important", that's why we need it here.
+ box-shadow: $background-darkest 0 0 5px !important;
+}
diff --git a/src/proxmox-dark/scss/extjs/_progress.scss b/src/proxmox-dark/scss/extjs/_progress.scss
new file mode 100644
index 0000000..4f2bb49
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_progress.scss
@@ -0,0 +1,19 @@
+.x-progress-default {
+ background-color: $form-field-body-color;
+
+ .x-progress-bar-default {
+ background-color: $primary-color; // Taken from the chart
+ }
+
+ .x-progress-text {
+ color: $text-color;
+ }
+}
+
+.x-progress.warning .x-progress-bar {
+ background-color: $background-warning;
+}
+
+.x-progress.critical .x-progress-bar {
+ background-color: $background-invalid;
+}
diff --git a/src/proxmox-dark/scss/extjs/_splitter.scss b/src/proxmox-dark/scss/extjs/_splitter.scss
new file mode 100644
index 0000000..ad3d6a8
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_splitter.scss
@@ -0,0 +1,18 @@
+// Splitters separating two views (e.g. Firewall > "Security Group",
+// "IPSet", ...)
+.x-splitter {
+ background-color: $background-darkest;
+}
+
+.x-splitter-horizontal {
+ background-color: $bottom-splitter-color;
+}
+
+// Splitters that separate content and resize parts of the window
+.x-keyboard-mode .x-splitter-focus::after {
+ border-color: $primary-color;
+}
+
+.x-layout-split-bottom {
+ opacity: 0.7;
+}
diff --git a/src/proxmox-dark/scss/extjs/_tabbar.scss b/src/proxmox-dark/scss/extjs/_tabbar.scss
new file mode 100644
index 0000000..e1b5f66
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_tabbar.scss
@@ -0,0 +1,43 @@
+// The header of the tabbar
+.x-tab-bar-default {
+ background-color: $background-darker;
+}
+
+.x-tab-default {
+ // Hovering over a tab button
+ &.x-tab-over {
+ background-color: $primary-dark;
+ border-color: $primary-dark;
+ }
+
+ // Selected tab buttons
+ &.x-tab.x-tab-active {
+ background-color: $primary-light;
+ border-color: $primary-light;
+ }
+
+ // Disabled tab buttons
+ &.x-tab.x-tab-disabled {
+ background-color: $background-darker;
+
+ // make the border invisible so it matches the light theme, setting
+ // it to none messes with the allignment of the elements.
+ border-color: transparent;
+ color: $text-color;
+ }
+
+ .x-keyboard-mode &.x-tab-focus.x-tab-active {
+ background-color: $primary-color;
+ border-color: $primary-color;
+ }
+}
+
+// Not selected tab buttons
+.x-tab-default-top {
+ background-color: $background-darker;
+ border-color: $background-darker;
+}
+
+.x-tab-inner-default {
+ color: $text-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/_tip.scss b/src/proxmox-dark/scss/extjs/_tip.scss
new file mode 100644
index 0000000..0c2cb6a
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_tip.scss
@@ -0,0 +1,18 @@
+.x-tip-default {
+ background-color: $background-darkest;
+ border-color: $border-color-alt;
+}
+
+.x-tip-body-default {
+ color: $text-color;
+}
+
+// Form error tip
+.x-tip-form-invalid {
+ background-color: $background-dark;
+ border-color: $border-color-alt;
+}
+
+.x-tip-body-form-invalid {
+ color: $text-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/_toolbar.scss b/src/proxmox-dark/scss/extjs/_toolbar.scss
new file mode 100644
index 0000000..2ea8527
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_toolbar.scss
@@ -0,0 +1,21 @@
+.x-toolbar {
+ background-color: $background-darker;
+}
+
+.x-toolbar-default {
+ background-color: $background-darker;
+ border: solid 3px $background-darkest;
+
+ &.x-docked-top {
+ border-width: 1px;
+ border-color: $border-color-alt;
+ }
+
+ .x-toolbar-separator {
+ border-color: $border-color;
+ }
+}
+
+.x-toolbar-text-default {
+ color: $text-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/_treepanel.scss b/src/proxmox-dark/scss/extjs/_treepanel.scss
new file mode 100644
index 0000000..0480371
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_treepanel.scss
@@ -0,0 +1,24 @@
+// individual rows in tree lists (e.g. the menu in the "middle")
+.x-treelist-item {
+ background-color: $background-darker;
+}
+
+.x-treelist-item-text,
+.x-treelist-item-icon,
+.x-treelist-row-over .x-treelist-item-icon,
+.x-treelist-row-over .x-treelist-item-text {
+ color: $text-color;
+}
+
+.x-treelist-item-selected > .x-treelist-row {
+ background-color: $primary-color;
+}
+
+.x-treelist-row-over {
+ background-color: $selection-background-color;
+}
+
+.x-treelist-pve-nav {
+ background-color: $background-darker;
+ border-color: $border-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/_window.scss b/src/proxmox-dark/scss/extjs/_window.scss
new file mode 100644
index 0000000..0fe188d
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/_window.scss
@@ -0,0 +1,39 @@
+.x-window-default {
+ background-color: $background-darkest;
+
+ // make the color transparent so the border doesn't appear visibly,
+ // like in crisp, but keep to keep the layout intact
+ border-color: transparent;
+}
+
+.x-window-header-default {
+ background-color: $background-darker;
+
+ // make the color transparent so the border doesn't appear visibly,
+ // like in crisp, but keep to keep the layout intact
+ border-color: transparent;
+}
+
+.x-window-header-title-default {
+ color: $highlighted-text;
+}
+
+.x-window-body-default {
+ background-color: $background-darker;
+ border-color: $border-color-alt;
+ color: $text-color;
+}
+
+// Window when dragged
+.x-window-ghost {
+ background-color: $background-darker;
+}
+
+// The X in the right upper corner of closable windows
+.x-window-header-default .x-tool-img {
+ background-color: transparent;
+}
+
+.x-message-box .x-window-body {
+ background-color: $background-dark;
+}
diff --git a/src/proxmox-dark/scss/extjs/form/_button.scss b/src/proxmox-dark/scss/extjs/form/_button.scss
new file mode 100644
index 0000000..0aa1475
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/form/_button.scss
@@ -0,0 +1,57 @@
+// The "main" buttons like Login, Create, ...
+.x-btn-default-small {
+ background-color: $primary-color;
+ border-color: $primary-color;
+
+ &.x-btn-over,
+ .x-keyboard-mode &.x-btn-focus {
+ background-color: $primary-light;
+ border-color: $primary-light;
+ }
+
+ &.x-btn.x-btn-disabled {
+ background-color: $primary-color;
+ }
+
+ &.x-btn.x-btn-pressed {
+ background-color: $primary-dark;
+ border-color: $primary-color;
+ }
+}
+
+// toolbar butons
+.x-btn-default-toolbar-small {
+ background-color: $neutral-button-color;
+ border-color: $neutral-button-color-alt;
+
+ .x-btn-inner-default-toolbar-small {
+ color: $neutral-button-text-color;
+ }
+
+ .x-btn-icon-el-default-toolbar-small {
+ color: $neutral-button-icon-color;
+ }
+
+ &.x-btn-over,
+ .x-keyboard-mode &.x-btn-focus {
+ background-color: $neutral-button-color-alt;
+
+ // the little arrow in certain toolbar buttons with dropdowns
+ .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after,
+ .x-btn-wrap-default-toolbar-small.x-btn-split-right::after {
+ filter: invert($icon-brightness);
+ }
+ }
+
+ &.x-btn.x-btn-disabled {
+ // Note: extJS already sets transparency on disabled buttons
+ background-color: $neutral-button-color;
+ }
+
+ // toggled state of toggle buttons (e.g. filter in task history)
+ &.x-btn.x-btn-menu-active,
+ &.x-btn.x-btn-pressed {
+ background-color: $primary-dark;
+ border-color: $primary-color;
+ }
+}
diff --git a/src/proxmox-dark/scss/extjs/form/_combobox.scss b/src/proxmox-dark/scss/extjs/form/_combobox.scss
new file mode 100644
index 0000000..a6405a1
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/form/_combobox.scss
@@ -0,0 +1,23 @@
+// Combobox "expand" trigger
+.x-form-trigger-default {
+ background-color: $form-field-body-color;
+}
+
+.x-boundlist {
+ border-color: $form-field-body-color;
+}
+
+// Combobox item
+.x-boundlist-item {
+ background-color: $form-field-body-color;
+ border-color: $form-field-body-color;
+ color: $text-color;
+}
+
+.x-boundlist-selected {
+ background-color: mix(black, $selection-background-color, 20%);
+}
+
+.x-boundlist-item-over {
+ background-color: $selection-background-color;
+}
diff --git a/src/proxmox-dark/scss/extjs/form/_formfield.scss b/src/proxmox-dark/scss/extjs/form/_formfield.scss
new file mode 100644
index 0000000..13f0622
--- /dev/null
+++ b/src/proxmox-dark/scss/extjs/form/_formfield.scss
@@ -0,0 +1,40 @@
+// displayfields in forms (e.g. the guest os header in the vm creation
+// form)
+.x-form-display-field-default {
+ color: $text-color;
+}
+
+// The body of a text form field
+.x-form-text-default {
+ background-color: $form-field-body-color;
+ color: $text-color;
+}
+
+// Unselected form field
+.x-form-trigger-wrap-default {
+ border-color: $form-field-body-color;
+
+ // Focused form field
+ &.x-form-trigger-wrap-focus {
+ border-color: mix(black, $primary-color, 3%);
+ }
+}
+
+// Labels
+.x-form-item-label-default {
+ color: $text-color;
+}
+
+// number field arrow up and down buttons
+.x-form-spinner-default {
+ background-color: $form-field-body-color;
+}
+
+.x-form-cb-label-default {
+ color: $icon-color;
+}
+
+// Fieldsets used in e.g. the personal settings
+.x-fieldset-default {
+ border-color: $border-color-alt;
+}
diff --git a/src/proxmox-dark/scss/other/_charts.scss b/src/proxmox-dark/scss/other/_charts.scss
new file mode 100644
index 0000000..5c67282
--- /dev/null
+++ b/src/proxmox-dark/scss/other/_charts.scss
@@ -0,0 +1,39 @@
+// these css variables define the look of all charts and gauges
+:root {
+ // using interpolation here may avoid compatability issues between
+ // sass and css. see:
+ // https://sass-lang.com/documentation/breaking-changes/css-vars
+ --pwt-panel-background: #{$background-darker};
+ --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-chart-primary: #{$primary-color};
+ --pwt-chart-grid-stroke: #{$content-background-selected};
+}
+
+// Peeks out on the edges of the legend item border
+.x-legend-container {
+ background-color: $content-background-color;
+}
+
+.x-legend-horizontal .x-legend-item {
+ background-color: $background-dark;
+ color: $text-color;
+ border-top: solid 1px $background-darkest;
+ border-right: solid 1px $background-darkest;
+ border-bottom: solid 1px $background-darkest;
+
+ &:first-child {
+ border-left: solid 1px $background-darkest;
+ }
+}
+
+// The "undo zoom" button in the upper right corner of charts when
+// disabled
+.x-tool .x-mask {
+ backdrop-filter: none;
+ background-color: $background-dark;
+ opacity: 0.6;
+}
diff --git a/src/proxmox-dark/scss/other/_icons.scss b/src/proxmox-dark/scss/other/_icons.scss
new file mode 100644
index 0000000..f132dae
--- /dev/null
+++ b/src/proxmox-dark/scss/other/_icons.scss
@@ -0,0 +1,200 @@
+// these styling fix all kinds of icons in grid, treeview etc.
+
+// most icons just use the color attribute..
+// Running containers and VMS
+.x-grid-icon-custom.running,
+.x-tree-icon-custom.running,
+// Icons in trees (e.g. Resource tree)
+.x-tree-icon-custom,
+// Icons in panels, e.g. Search tab
+.fa-database::before,
+// Icon for pools
+.fa-tags::before,
+// The template icon
+.fa-file-o::before,
+// Icon for cluster nodes
+.fa-building::before,
+// e.g. storage list when creating a guest
+.x-action-col-icon::before,
+.fa-shield::before,
+.fa-file-text-o::before,
+.fa-clock-o::before,
+// tab bar icons
+.x-tab-icon-el-default,
+.pve-icon-verify-lettering::after,
+// the small plane when migrating a vm
+.x-tree-icon-custom.lock-migrate::after,
+.x-grid-icon-custom.lock-migrate::after,
+// e.g. permission tree view in pve
+.x-tree-icon-leaf:not(.x-tree-icon-custom)::before,
+.x-tree-icon-parent:not(.x-tree-icon-custom)::before,
+.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before {
+ color: $icon-color;
+}
+
+// but some are implement as background SVGs or PNGs. invert them via
+// filters:
+.fa-ceph::before,
+.fa-sdn::before,
+.fa-network-wired::before,
+// Icon for "ISO Images" for storages
+.pve-itype-treelist-item-icon-cdrom,
+// Arrow to the right
+.fa-chevron-right::before,
+// icon indicating a currently open shell session in the task viewer
+.x-grid-row-console,
+// the "triangle" that appears when the sidebar becomes scrollable
+.x-box-scroller-toolbar-default.x-box-scroller,
+// the small triangles in the tree view next to nodes etc.
+.x-tree-elbow-img,
+// the computer icon in the resource pool add menu
+.pve-itype-icon-qemu,
+.x-tree-node-computer,
+.x-grid-tree-node-expanded .x-tree-node-computer,
+.pbs-icon-tape,
+.pbs-icon-tape-drive,
+.x-tree-icon-leaf:not(.x-tree-icon-custom),
+// default tree panel icons (api viewer, pbs backup panel)
+.x-tree-icon-parent:not(.x-tree-icon-custom),
+.x-tree-icon-parent-expanded:not(.x-tree-icon-custom) {
+ filter: invert($icon-brightness);
+}
+
+// the following icons need some additional fix-ups to work well in
+// grids (e.g. when hovered etc.)
+// Icon for the processor in VM hardware settings
+.pve-itype-icon-cpu,
+// Icon for memory in VM hardware settings
+.pve-itype-icon-cdrom,
+// Icon for memory in VM hardware settings
+.pve-itype-icon-memory,
+// the pcie device icon in the vm hardware section
+.pve-itype-icon-pci,
+// the serial device icon in the vm hardware section
+.pve-itype-icon-serial,
+// the rng icon in the vm hardware section
+.pve-itype-icon-die,
+// Processor icon for summary page
+.pmx-itype-icon-processor,
+// Memory icon on summary page
+.pmx-itype-icon-memory,
+// the mount point icon for containers
+.pve-itype-icon-storage,
+.x-tree-node-harddisk,
+.x-grid-tree-node-expanded .x-tree-node-harddisk {
+ filter: invert($icon-brightness);
+
+ // the filter also applies to the text next to the icon
+ .x-grid-cell-inner {
+ color: black;
+ }
+
+ .x-grid-cell-inner::before {
+ // this is a somewhat hacky work-around for the focus borders on
+ // these elements. since we use the invert filter to fix the icon
+ // color we need to also invert the border color first too, not
+ // just the text. add "!important" to properly override.
+ border-color: invert($primary-color, $weight: 90%) !important;
+ }
+}
+
+// pbs show task log in longest task list column
+.x-action-col-icon.fa-chevron-right::before {
+ filter: none;
+}
+
+// checkboxes and radio buttons
+.x-form-checkbox-default,
+.x-form-radio-default,
+.x-column-header-checkbox .x-column-header-checkbox::after,
+.x-grid-checkcolumn::after {
+ filter: invert($icon-brightness) hue-rotate(180deg);
+}
+
+.x-tree-icon-custom,
+.x-grid-icon-custom {
+ &::after {
+ color: $icon-color;
+ text-shadow: -1px 0 1px $background-darker;
+ }
+
+ // stopped containers and VMs
+ &.stopped,
+ // vms/cts that are offline
+ &.offline,
+ // question mark at the bottom right of e.g. unreachable storages
+ &.unknown::after {
+ color: $icon-color-alt;
+ }
+
+ &.lxc::after,
+ &.qemu::after {
+ background-color: $background-darker;
+ color: $icon-color;
+ }
+}
+
+// icons for templates in the storages view
+.x-treelist-item-icon {
+ &.lxc::after,
+ &.qemu::after {
+ background-color: $background-darker;
+ color: $icon-color;
+ }
+}
+
+.x-grid-item .x-grid-icon-custom {
+ &.lxc::after,
+ &.qemu::after {
+ background-color: $background-darker;
+ }
+}
+
+.x-grid-item-alt .x-grid-icon-custom {
+ &.lxc::after,
+ &.qemu::after {
+ background-color: $background-darkest;
+ }
+}
+
+.x-treelist-item-selected {
+ .lxc::after,
+ .qemu::after {
+ background-color: $primary-color;
+ text-shadow: -1px 0 1px $primary-color;
+ }
+}
+
+.x-grid-item-over,
+// hovered items in treelists
+.x-treelist-item-over,
+// template icons when in selected menu item or table row
+.x-grid-item-selected,
+// vm/ct that is focused (e.g. by mouse-down)
+.x-keyboard-mode .x-grid-item-focused {
+ .lxc::after,
+ .qemu::after {
+ background-color: $selection-background-color !important;
+ text-shadow: -1px 0 1px $selection-background-color;
+ }
+}
+
+.x-action-col-icon:hover {
+ &::before,
+ &::after {
+ text-shadow: -1px 0 1px $background-darker;
+ }
+}
+
+// The usage icons dynamically displaying how full a storage is
+.usage-wrapper {
+ border: 1px solid $icon-color;
+}
+
+.usage-negative {
+ background-color: transparent;
+}
+
+.usage {
+ background-color: $icon-color;
+}
diff --git a/src/proxmox-dark/scss/proxmox/_datepicker.scss b/src/proxmox-dark/scss/proxmox/_datepicker.scss
new file mode 100644
index 0000000..068e7e6
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_datepicker.scss
@@ -0,0 +1,61 @@
+.x-datepicker,
+.x-datepicker-column-header,
+.x-monthpicker {
+ background-color: $background-darker;
+ color: $text-color;
+
+ // make the border invisible but keep it to keep the layout intact
+ border-color: transparent;
+}
+
+.x-datepicker-month .x-btn-over.x-btn-default-small {
+ background-color: $selection-background-color;
+}
+
+.x-monthpicker-months {
+ border-color: $border-color-alt;
+}
+
+.x-datepicker-header {
+ background-color: $background-darkest;
+}
+
+.x-datepicker-cell,
+.x-monthpicker-item-inner {
+ // make the border invisible but keep it to keep the layout intact
+ border-color: transparent;
+}
+
+.x-datepicker-date,
+.x-monthpicker-item-inner {
+ color: $text-color;
+}
+
+.x-datepicker-prevday,
+.x-datepicker-nextday {
+ .x-datepicker-date {
+ color: $text-color-inactive;
+ }
+}
+
+.x-datepicker-footer,
+.x-monthpicker-buttons {
+ background-color: $background-darkest;
+}
+
+.x-datepicker-selected div.x-datepicker-date,
+.x-monthpicker-item a.x-monthpicker-selected,
+a.x-monthpicker-item-inner:hover,
+div.x-datepicker-date:hover {
+ @include selection;
+}
+
+.x-datepicker-disabled {
+ .x-datepicker-date {
+ background-color: $background-darkest;
+ }
+
+ div.x-datepicker-date:hover {
+ background-color: $background-darker;
+ }
+}
diff --git a/src/proxmox-dark/scss/proxmox/_general.scss b/src/proxmox-dark/scss/proxmox/_general.scss
new file mode 100644
index 0000000..805a187
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_general.scss
@@ -0,0 +1,56 @@
+// Swapping out the logo with CSS rather than using javascript
+img[id^="proxmoxlogo-"][id$="-img"] {
+ filter: invert(1) hue-rotate(180deg);
+}
+
+// removes the gray line in the header of the mail gateway
+div[id^="versioninfo-"] + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"] > div {
+ background-color: transparent;
+ border-color: transparent;
+}
+
+// border around the main datacenter view
+div[id^="PVE-dc-Config-"][id$="-body"],
+// border around the main pool view
+div[id^="pvePoolConfig-"][id$="-body"],
+// Container content config views
+div[id^="pveLXCConfig-"][id$="-body"],
+// VM content config views
+div[id^="PVE-qemu-Config-"][id$="-body"],
+div[id^="PVE-storage-Browser-"][id$="-body"],
+div[id^="PVE-node-Config-"][id$="-body"] {
+ @include content-border;
+}
+
+// Section header in the "My Settings" page
+.x-fieldset-header-default > .x-fieldset-header-text {
+ color: $text-color;
+}
+
+// Errors and bad configuration (Taskviewer / no repository enabled)
+.proxmox-invalid-row {
+ background-color: $background-invalid;
+}
+
+// Warning rows, e.g. when enabling staging or no-subscription
+// repository
+.proxmox-warning-row {
+ background-color: $background-warning;
+}
+
+// Disabled rows (e.g. disabled repos in Repository view)
+.proxmox-disabled-row td {
+ color: $text-color-inactive;
+}
+
+.pmx-hint {
+ background-color: $background-warning;
+}
+
+.pmx-hint a {
+ color: $highlighted-text-alt;
+}
+
+.pmx-hint a:active {
+ color: $highlighted-text;
+}
diff --git a/src/proxmox-dark/scss/proxmox/_helpbutton.scss b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
new file mode 100644
index 0000000..aad92e2
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
@@ -0,0 +1,16 @@
+// help buttons
+.proxmox-inline-button {
+ background-color: $help-button-color;
+ color: $help-button-text-color;
+
+ &.x-btn-over,
+ &.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
+ background-color: $help-button-color-alt;
+ border-color: $help-button-color-alt;
+ }
+
+ .x-btn-inner,
+ .x-btn-icon-el {
+ color: $help-button-icon-color;
+ }
+}
diff --git a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
new file mode 100644
index 0000000..5c320b3
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
@@ -0,0 +1,14 @@
+// loading spinners
+.x-grid-row-loading,
+.x-treelist-item-loading .x-treelist-item-icon,
+.x-treelist-nav .x-treelist-item-loading .x-treelist-item-icon,
+.x-mask-msg-text,
+.x-grid-tree-loading .x-tree-icon {
+ filter: invert($icon-brightness);
+ color: black;
+}
+
+.x-mask-msg {
+ background-color: $form-field-body-color;
+ border: solid 1px mix(black, $form-field-body-color, 25%);
+}
diff --git a/src/proxmox-dark/scss/proxmox/_markdown.scss b/src/proxmox-dark/scss/proxmox/_markdown.scss
new file mode 100644
index 0000000..8531701
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_markdown.scss
@@ -0,0 +1,31 @@
+.pmx-md {
+ code {
+ background-color: $background-darkest;
+ }
+
+ pre code {
+ border-color: $border-color-alt;
+ }
+
+ tbody tr {
+ & td {
+ border-color: $border-color;
+ }
+
+ &:nth-of-type(2n) {
+ background-color: $background-darkest;
+ }
+
+ &:hover td {
+ background-color: $content-background-selected;
+ }
+ }
+
+ a {
+ color: $highlighted-text;
+
+ &:active {
+ color: $highlighted-text-alt;
+ }
+ }
+}
diff --git a/src/proxmox-dark/scss/proxmox/_nodes.scss b/src/proxmox-dark/scss/proxmox/_nodes.scss
new file mode 100644
index 0000000..02b15f9
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_nodes.scss
@@ -0,0 +1,9 @@
+// Table headers under Node > "Updates" > "Repositories"
+.proxmox-apt-repos .x-grid-group-hd {
+ background-color: $background-darker;
+ border-bottom-width: 0;
+}
+
+.proxmox-apt-repos .x-grid-group-title {
+ color: $text-color;
+}
diff --git a/src/proxmox-dark/scss/proxmox/_quarantine.scss b/src/proxmox-dark/scss/proxmox/_quarantine.scss
new file mode 100644
index 0000000..bdda69a
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_quarantine.scss
@@ -0,0 +1,47 @@
+// these css variables define the look of the spamscore grid in pmg
+:root {
+ // using interpolation here may avoid compatability issues between
+ // sass and css. see:
+ // https://sass-lang.com/documentation/breaking-changes/css-vars
+ // for spam with an absolute score >= 3
+ --pmg-spam-high-neg: #{$spam-high-neg};
+ --pmg-spam-high-pos: #{$spam-high-pos};
+
+ // for spam with an absolute score between 0.1 and 3
+ --pmg-spam-mid-neg: #{$spam-mid-neg};
+ --pmg-spam-mid-pos: #{$spam-mid-pos};
+
+ // for spam with an absolute score <= 0.1
+ --pmg-spam-low-neg: #{$spam-low-neg};
+ --pmg-spam-low-pos: #{$spam-low-pos};
+}
+
+.info-blue {
+ // the selector for the button icons have higher specificity than
+ // this one, so we need "!important"
+ color: $highlighted-text !important;
+}
+
+.critical {
+ // the selector for the button icons have higher specificity than
+ // this one, so we need "!important"
+ color: $highlighted-text-crit !important;
+}
+
+// pmg tracking center quarantined rows
+tr.blocked,
+.x-keyboard-mode tr.blocked .x-grid-item-focused {
+ background-color: $background-invalid;
+}
+
+// pmg tracking center quarantined rows
+tr.quarantine,
+.x-keyboard-mode tr.quarantine .x-grid-item-focused {
+ background-color: mix($background-warning, $background-invalid, 50%);
+}
+
+// pmg tracking center blocked rows
+tr.bounced,
+.x-keyboard-mode tr.bounced .x-grid-item-focused {
+ background-color: $background-warning;
+}
diff --git a/src/proxmox-dark/scss/proxmox/_storages.scss b/src/proxmox-dark/scss/proxmox/_storages.scss
new file mode 100644
index 0000000..46b94f4
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_storages.scss
@@ -0,0 +1,19 @@
+// ceph page
+table.osds {
+ tr {
+ border-color: $border-color;
+ }
+
+ td {
+ border-color: $border-color;
+ }
+}
+
+.install-mask {
+ background-color: $background-darker;
+ color: $text-color;
+}
+
+div.monitor {
+ border-color: $border-color;
+}
diff --git a/src/proxmox-dark/scss/proxmox/_tags.scss b/src/proxmox-dark/scss/proxmox/_tags.scss
new file mode 100644
index 0000000..09ad623
--- /dev/null
+++ b/src/proxmox-dark/scss/proxmox/_tags.scss
@@ -0,0 +1,14 @@
+.pve-edit-tag.editable span {
+ background-color: $form-field-body-color;
+ color: $text-color;
+ border-color: $border-color;
+}
+
+// adds a bit of outline to make tags stand out more
+.proxmox-tags-full,
+.proxmox-tags-circle {
+ .proxmox-tag-light,
+ .proxmox-tag-dark {
+ outline: 1px solid rgba($background-dark, 0.3);
+ }
+}
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
@ 2023-03-08 16:36 ` Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
` (9 subsequent siblings)
12 siblings, 2 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:36 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
setting the background color in js code adds that property as a style
attribute to the element. that makes it hard to alter later via css
and makes it hard to dynamically change the color e.g., if we want to
add different themes. the background color for these elements are
white already anyway, so just remove them here.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/node/APT.js | 1 -
src/window/AddTotp.js | 1 -
src/window/DiskSmart.js | 1 -
src/window/PackageVersions.js | 1 -
4 files changed, 4 deletions(-)
diff --git a/src/node/APT.js b/src/node/APT.js
index 2e5a776..739aaf3 100644
--- a/src/node/APT.js
+++ b/src/node/APT.js
@@ -116,7 +116,6 @@ Ext.define('Proxmox.node.APT', {
let view = Ext.createWidget('component', {
autoScroll: true,
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
padding: '5px',
diff --git a/src/window/AddTotp.js b/src/window/AddTotp.js
index bdb4826..080b361 100644
--- a/src/window/AddTotp.js
+++ b/src/window/AddTotp.js
@@ -224,7 +224,6 @@ Ext.define('Proxmox.window.AddTotp', {
visible: '{!secretEmpty}',
},
style: {
- 'background-color': 'white',
'margin-left': 'auto',
'margin-right': 'auto',
padding: '5px',
diff --git a/src/window/DiskSmart.js b/src/window/DiskSmart.js
index b538ea1..1cae512 100644
--- a/src/window/DiskSmart.js
+++ b/src/window/DiskSmart.js
@@ -74,7 +74,6 @@ Ext.define('Proxmox.window.DiskSmart', {
autoScroll: true,
padding: 5,
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
},
diff --git a/src/window/PackageVersions.js b/src/window/PackageVersions.js
index e79d29f..aaa1372 100644
--- a/src/window/PackageVersions.js
+++ b/src/window/PackageVersions.js
@@ -45,7 +45,6 @@ Ext.define('Proxmox.window.PackageVersions', {
html: '{packageList}',
},
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
},
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
@ 2023-03-08 16:36 ` Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
1 sibling, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:36 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
the gauges in the data center overview should use a dark style if the
relevant css variables are set. this also makes it possible to switch
the colors dynamically by adding an event listener
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/panel/GaugeWidget.js | 45 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 45 insertions(+)
diff --git a/src/panel/GaugeWidget.js b/src/panel/GaugeWidget.js
index 0cc2079..00567a2 100644
--- a/src/panel/GaugeWidget.js
+++ b/src/panel/GaugeWidget.js
@@ -61,6 +61,36 @@ Ext.define('Proxmox.panel.GaugeWidget', {
initialValue: 0,
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get colors
+ let panelBg = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+ let textColor = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+ me.defaultColor = rootStyle.getPropertyValue("--pwt-gauge-default").trim() || '#c2ddf2';
+ me.criticalColor = rootStyle.getPropertyValue("--pwt-gauge-crit").trim() || '#ff6c59';
+ me.warningColor = rootStyle.getPropertyValue("--pwt-gauge-warn").trim() || '#fc0';
+ me.backgroundColor = rootStyle.getPropertyValue("--pwt-gauge-back").trim() || '#f5f5f5';
+
+ // set gauge colors
+ let value = me.chart.series[0].getValue() / 100;
+
+ let color = me.defaultColor;
+
+ if (value >= me.criticalThreshold) {
+ color = me.criticalColor;
+ } else if (value >= me.warningThreshold) {
+ color = me.warningColor;
+ }
+
+ me.chart.series[0].setColors([color, me.backgroundColor]);
+
+ // set text and background colors
+ me.chart.setBackground(panelBg);
+ me.valueSprite.setAttributes({ fillStyle: textColor }, true);
+ me.chart.redraw();
+ },
updateValue: function(value, text) {
let me = this;
@@ -100,5 +130,20 @@ Ext.define('Proxmox.panel.GaugeWidget', {
me.text = me.getComponent('text');
me.chart = me.getComponent('chart');
me.valueSprite = me.chart.getSurface('chart').get('valueSprite');
+
+ me.checkThemeColors();
+
+ // switch colors on media query changes
+ me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+ me.themeListener = (e) => { me.checkThemeColors(); };
+ me.mediaQueryList.addEventListener("change", me.themeListener);
+ },
+
+ doDestroy: function() {
+ let me = this;
+
+ me.mediaQueryList.removeEventListener("change", me.themeListener);
+
+ me.callParent();
},
});
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the dark theme and dynamic theme switching
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
@ 2023-03-08 16:36 ` Stefan Sterz
1 sibling, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:36 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
by integrating the theme switching logic into the chart panel itself,
themes can be switched more responsively based on css variables.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/panel/RRDChart.js | 37 +++++++++++++++++++++++++++++++++++++
1 file changed, 37 insertions(+)
diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js
index 263070a..dc5940c 100644
--- a/src/panel/RRDChart.js
+++ b/src/panel/RRDChart.js
@@ -183,6 +183,27 @@ Ext.define('Proxmox.widget.RRDChart', {
me.callParent([config]);
},
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get colors
+ let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+ let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+ let primary = rootStyle.getPropertyValue("--pwt-chart-primary").trim() || "#000000";
+ let gridStroke = rootStyle.getPropertyValue("--pwt-chart-grid-stroke").trim() || "#dddddd";
+
+ // set the colors
+ me.setBackground(background);
+ me.axes.forEach((axis) => {
+ axis.setLabel({ color: text });
+ axis.setTitle({ color: text });
+ axis.setStyle({ strokeStyle: primary });
+ axis.setGrid({ stroke: gridStroke });
+ });
+ me.redraw();
+ },
+
initComponent: function() {
let me = this;
@@ -275,5 +296,21 @@ Ext.define('Proxmox.widget.RRDChart', {
easing: 'easeIn',
});
}, this, { single: true });
+
+
+ me.checkThemeColors();
+
+ // switch colors on media query changes
+ me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+ me.themeListener = (e) => { me.checkThemeColors(); };
+ me.mediaQueryList.addEventListener("change", me.themeListener);
+ },
+
+ doDestroy: function() {
+ let me = this;
+
+ me.mediaQueryList.removeEventListener("change", me.themeListener);
+
+ me.callParent();
},
});
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (2 preceding siblings ...)
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
@ 2023-03-08 16:37 ` Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
` (8 subsequent siblings)
12 siblings, 1 reply; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:37 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
From: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
add a widget that implements a theme selector and sets a cookie to
load the appropriate theme.
Co-authored-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Co-authored-by: Stefan Sterz <s.sterz@proxmox.com>
Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/Makefile | 2 ++
src/Utils.js | 25 ++++++++++++++++++++
src/form/ThemeSelector.js | 6 +++++
src/window/ThemeEdit.js | 49 +++++++++++++++++++++++++++++++++++++++
4 files changed, 82 insertions(+)
create mode 100644 src/form/ThemeSelector.js
create mode 100644 src/window/ThemeEdit.js
diff --git a/src/Makefile b/src/Makefile
index 54727f6..11790a0 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -44,6 +44,7 @@ JSSRC= \
form/TaskTypeSelector.js \
form/ACME.js \
form/UserSelector.js \
+ form/ThemeSelector.js \
button/Button.js \
button/AltText.js \
button/HelpButton.js \
@@ -90,6 +91,7 @@ JSSRC= \
window/AddYubico.js \
window/TfaEdit.js \
window/NotesEdit.js \
+ window/ThemeEdit.js \
node/APT.js \
node/APTRepositories.js \
node/NetworkEdit.js \
diff --git a/src/Utils.js b/src/Utils.js
index 8a97487..2ab1d0a 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -109,6 +109,31 @@ utilities: {
return data;
},
+ theme_map: {
+ auto: 'auto',
+ "proxmox-dark": 'Proxmox Dark',
+ },
+
+ render_theme: function(value) {
+ if (!value || value === '__default__') {
+ return Proxmox.Utils.defaultText + ' (Light theme)';
+ }
+ let text = Proxmox.Utils.theme_map[value];
+ if (text) {
+ return text;
+ }
+ return value;
+ },
+
+ theme_array: function() {
+ let data = [['__default__', Proxmox.Utils.render_theme('')]];
+ Ext.Object.each(Proxmox.Utils.theme_map, function(key, value) {
+ data.push([key, Proxmox.Utils.render_theme(value)]);
+ });
+
+ return data;
+ },
+
bond_mode_gettext_map: {
'802.3ad': 'LACP (802.3ad)',
'lacp-balance-slb': 'LACP (balance-slb)',
diff --git a/src/form/ThemeSelector.js b/src/form/ThemeSelector.js
new file mode 100644
index 0000000..fa5ddb7
--- /dev/null
+++ b/src/form/ThemeSelector.js
@@ -0,0 +1,6 @@
+Ext.define('Proxmox.form.ThemeSelector', {
+ extend: 'Proxmox.form.KVComboBox',
+ xtype: 'proxmoxThemeSelector',
+
+ comboItems: Proxmox.Utils.theme_array(),
+});
diff --git a/src/window/ThemeEdit.js b/src/window/ThemeEdit.js
new file mode 100644
index 0000000..aec7082
--- /dev/null
+++ b/src/window/ThemeEdit.js
@@ -0,0 +1,49 @@
+Ext.define('Proxmox.window.ThemeEditWindow', {
+ extend: 'Ext.window.Window',
+ alias: 'widget.pmxThemeEditWindow',
+
+ viewModel: {
+ parent: null,
+ data: {
+ language: '__default__',
+ },
+ },
+ controller: {
+ xclass: 'Ext.app.ViewController',
+ init: function(view) {
+ let theme = Ext.util.Cookies.get(view.cookieName) || '__default__';
+ this.getViewModel().set('theme', theme);
+ },
+ applyTheme: function(button) {
+ let view = this.getView();
+ let vm = this.getViewModel();
+
+ let expire = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
+ Ext.util.Cookies.set(view.cookieName, vm.get('theme'), expire);
+ view.mask(gettext('Please wait...'), 'x-mask-loading');
+ window.location.reload();
+ },
+ },
+
+ cookieName: 'PVEThemeCookie',
+
+ title: gettext('Theme'),
+ modal: true,
+ bodyPadding: 10,
+ resizable: false,
+ items: [
+ {
+ xtype: 'proxmoxThemeSelector',
+ fieldLabel: gettext('Theme'),
+ bind: {
+ value: '{theme}',
+ },
+ },
+ ],
+ buttons: [
+ {
+ text: gettext('Apply'),
+ handler: 'applyTheme',
+ },
+ ],
+});
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
@ 2023-03-08 16:37 ` Stefan Sterz
0 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:37 UTC (permalink / raw)
To: pve-devel, pbs-devel, pmg-devel
allows using the theme toggle in the pmg quarantine properly. adds a
filter over the iframes in the quarantine to make them appear properly
in a dark environment.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/proxmox-dark/scss/proxmox/_quarantine.scss | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/proxmox-dark/scss/proxmox/_quarantine.scss b/src/proxmox-dark/scss/proxmox/_quarantine.scss
index bdda69a..9e467df 100644
--- a/src/proxmox-dark/scss/proxmox/_quarantine.scss
+++ b/src/proxmox-dark/scss/proxmox/_quarantine.scss
@@ -45,3 +45,9 @@ tr.bounced,
.x-keyboard-mode tr.bounced .x-grid-item-focused {
background-color: $background-warning;
}
+
+.pmg-mail-preview-themed div > iframe {
+ // by reducing the brightness first, pure blacks won't get inverted
+ // to pure white.
+ filter: brightness(95%) invert(95%);
+}
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (3 preceding siblings ...)
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
@ 2023-03-08 17:04 ` Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
` (7 subsequent siblings)
12 siblings, 0 replies; 22+ messages in thread
From: Thomas Lamprecht @ 2023-03-08 17:04 UTC (permalink / raw)
To: Proxmox VE development discussion, Stefan Sterz, pbs-devel, pmg-devel
Am 08/03/2023 um 17:18 schrieb Stefan Sterz:
> this patch series aims to add support for a dark theme to all current
> proxmox products. including:
>
> * proxmox virtual environment web gui & api viewer
> * proxmox backup server gui & api viewer
> * proxmox mail gateway gui, api viewer & (mobile) quarantine
>
> this patch series is split into several parts. the first concerns the
> widget toolkit and adds the necessary files and adaptions needed
> accross all three products. the other three parts integrate the new
> dark theme into pve, pbs and pmg and also adds changes needed by each
> product.
>
> part 1: widget toolkit
>
> the first commit adds styles that give the main gui a "dark"
> appearance. this includes adjusting the icons and other images as
> well as all backgrounds text and link colors. the second commit
> removes certain hard-coded background colors that are set via js.
> these don't behave properly in the dark theme and the gui behaves
> properly without them, so they are removed.
>
> the third and fourth commit make it possible for charts and gauges to
> switch their colors based on the current theme. the fifth commit adds
> a theme switcher widget that allows switching the current theme and
> then sets a cookie accordingly.
>
> the last commit is only relevant for the proxmox mail gateway and
> enables the proposed "theme switcher" function. this allows users to
> enable or disable a filter over the email preview in the quarantine.
> if the filter is enabled the email will have it's brightness reduced
> and the colors will be inverted. thus, plain text emails shouldn't
> appear too bright
>
> part 2: proxmox virtual environment
>
> the first commit for pve adds the theme switcher to the gui, the
> second adjusts the pveproxy template to properly handle the cookie
> set by the theme switcher. the third removes unnecessary hard-coded
> background colors and the forth add support for the charts used in
> pve only.
>
> the fifth commit concern pve-docs and adds support for the dark theme
> in the api viewer.
>
> part 3: proxmox backup server
>
> the commits for proxmox backup server first add the theme switcher,
> then removes hard-coded backgrounds and finally add dark theme support
> to the api viewer.
>
> part 4: proxmox mail gateway
>
> the first commit concerns the api and let's it handle cookie properly.
> the next five commits adjust gui to first add a theme switcher, then
> style the spam info grid, remove hard-coded white backgrounds, style
> the hourly mail chart, and enable the dark mode in the mobile
> quarantine.
>
> the second-to-last commit enables the theme switching mechanism for
> the quarantine mail preview. this part could be dropped in favor of
> extending the preview endpoint to add some styles to the preview that
> handle a dark theme. this would have the added benefit of also working
> in the mobile quarantine.
>
> the last commit for the mail gateway enables the dark theme in the api
> viewer.
>
> Daniel Tschlatscher (2):
> dark-theme: add initial version of the proxmox-dark theme
> util/window/form: add a theme selector
>
> Stefan Sterz (4):
> subscription/summary/backup: stop setting the background color
> gauge widget: add support for a dark theme and dynamic theme switching
> rrd chart: add support for the dark theme and dynamic theme switching
> dark-theme: add support for the pmg quarantine theme toggle
>
After re-checking basic UI stuff and some general skim plus some more close
spot checking of the changes - while there are some nits and surely some
slightly bigger fixes to be done, this is definitively easier and quicker
done as follow up, not re-sending the base of the series, so with that:
applied, huge thanks to you and Daniel!
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (4 preceding siblings ...)
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
@ 2023-03-09 8:00 ` Stefan Sterz
2023-03-10 10:14 ` Dominik Csapak
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
` (6 subsequent siblings)
12 siblings, 2 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:00 UTC (permalink / raw)
To: pmg-devel
parse the theme cookie so users can switch between themes in the ui
this requires a bump of the pmg-gui, which in turn needs a bump for
the widget toolkit, so the parameters passed to the template are
handled appropriately.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/PMG/Service/pmgproxy.pm | 16 +++++++++++++++-
1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/PMG/Service/pmgproxy.pm b/src/PMG/Service/pmgproxy.pm
index 5334e6f..9b5ba52 100755
--- a/src/PMG/Service/pmgproxy.pm
+++ b/src/PMG/Service/pmgproxy.pm
@@ -83,7 +83,8 @@ sub init {
add_dirs($dirs, '/pmg-docs/' => '/usr/share/pmg-docs/');
add_dirs($dirs, '/pmg-docs/api-viewer/extjs/' => $extjs_dir);
add_dirs($dirs, '/pwt/css/' => "$widgettoolkit_dir/css/");
- add_dirs($dirs, '/pwt/images/' => "$widgettoolkit_dir/images/");
+ add_dirs($dirs, '/pwt/images/' => "$widgettoolkit_dir/images/");
+ add_dirs($dirs, '/pwt/themes/' => "$widgettoolkit_dir/themes/");
$self->{server_config} = {
title => 'Proxmox Mail Gateway API',
@@ -198,12 +199,23 @@ sub get_index {
$mobile = $args->{mobile} ? 1 : 0;
}
+ my $theme;
+
if (my $cookie = $r->header('Cookie')) {
if (my $newlang = ($cookie =~ /(?:^|\s)PMGLangCookie=([^;]*)/)[0]) {
if ($newlang =~ m/^[a-z]{2,3}(_[A-Z]{2,3})?$/) {
$lang = $newlang;
}
}
+
+ if (my $newtheme = ($cookie =~ /(?:^|\s)PMGThemeCookie=([^;]*)/)[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 ($ticket =~ m/^PMGQUAR:/) {
@@ -257,6 +269,8 @@ sub get_index {
version => $version,
wtversion => $wtversion,
quarantinelink => $quarantinelink,
+ theme => $theme,
+ auto => $theme == "auto",
};
my $template_name;
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (5 preceding siblings ...)
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
@ 2023-03-09 8:00 ` Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables Stefan Sterz
` (5 subsequent siblings)
12 siblings, 1 reply; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:00 UTC (permalink / raw)
To: pmg-devel
adds a theme switcher to the main view and quarantine so that users
can choose a theme.
this requires a bump to the widget toolkit so the necessary widget are
present.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
js/MainView.js | 8 ++++++++
js/QuarantineView.js | 12 ++++++++++++
pmg-index.html.tt | 7 +++++++
3 files changed, 27 insertions(+)
diff --git a/js/MainView.js b/js/MainView.js
index 311b8c7..2cc140c 100644
--- a/js/MainView.js
+++ b/js/MainView.js
@@ -208,6 +208,14 @@ Ext.define('PMG.MainView', {
text: gettext('My Settings'),
handler: () => Ext.create('PMG.window.Settings').show(),
},
+ {
+ iconCls: 'fa fa-paint-brush',
+ text: gettext('Theme'),
+ handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+ cookieName: 'PMGThemeCookie',
+ autoShow: true,
+ }),
+ },
{
iconCls: 'fa fa-language',
text: gettext('Language'),
diff --git a/js/QuarantineView.js b/js/QuarantineView.js
index 149f581..b3315cf 100644
--- a/js/QuarantineView.js
+++ b/js/QuarantineView.js
@@ -141,6 +141,10 @@ Ext.define('PMG.QuarantineView', {
}).show();
},
+ changeTheme: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+ cookieName: 'PMGThemeCookie',
+ autoShow: true,
+ }),
navigate: function(treelist, item) {
this.redirectTo(item.get('path'));
},
@@ -156,6 +160,9 @@ Ext.define('PMG.QuarantineView', {
'[reference=languageButton]': {
click: 'changeLanguage',
},
+ '[reference=themeButton]': {
+ click: 'changeTheme',
+ },
},
init: function(view) {
@@ -233,6 +240,11 @@ Ext.define('PMG.QuarantineView', {
margin: '0 5 0 0',
iconCls: 'fa fa-user',
menu: [
+ {
+ reference: 'themeButton',
+ iconCls: 'fa fa-paint-brush',
+ text: gettext('Theme'),
+ },
{
iconCls: 'fa fa-language',
text: gettext('Language'),
diff --git a/pmg-index.html.tt b/pmg-index.html.tt
index 4e9f1af..12c18d3 100644
--- a/pmg-index.html.tt
+++ b/pmg-index.html.tt
@@ -13,6 +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 %]
+ <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/pmg-lang-[% lang %].js'></script>
[% ELSE %]
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (6 preceding siblings ...)
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
@ 2023-03-09 8:00 ` Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
` (4 subsequent siblings)
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:00 UTC (permalink / raw)
To: pmg-devel
by using css variables for the colored grid items in the spam info
grid, changing these colors based on media queries etc. is possible.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
css/ext6-pmg.css | 10 ++++++++++
js/SpamInfoGrid.js | 15 +++++++++------
2 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 3c47fd9..2f999f4 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -1,3 +1,13 @@
+/* color variables (e.g. for the spam info grid) */
+:root {
+ --pmg-spam-high-neg: #ACD1EC;
+ --pmg-spam-high-pos: #E8B0B2;
+ --pmg-spam-mid-neg: #d7e9f6;
+ --pmg-spam-mid-pos: #f3d6d7;
+ --pmg-spam-low-neg: #EEF6FB;
+ --pmg-spam-low-pos: #FAEFF0;
+}
+
/* overwrite to use full black for enabled buttons */
.x-btn-inner-default-toolbar-small {
font: 300 12px/16px helvetica, arial, verdana, sans-serif;
diff --git a/js/SpamInfoGrid.js b/js/SpamInfoGrid.js
index a806ea3..00d6f97 100644
--- a/js/SpamInfoGrid.js
+++ b/js/SpamInfoGrid.js
@@ -44,22 +44,25 @@ Ext.define('PMG.grid.SpamInfoGrid', {
dataIndex: 'score',
align: 'right',
tdCls: 'txt-monospace',
- renderer: function(score, metaData) {
+ renderer: function(score, meta) {
if (score === 0) {
return score;
}
- let absScore = Math.abs(score);
- let fontWeight = '400', background = score < 0 ? '#d7e9f6' : '#f3d6d7';
+
+ let absScore = Math.abs(score), fontWeight = '400';
+ let background = score < 0 ? "--pmg-spam-mid-neg" : "--pmg-spam-mid-pos";
+
if (absScore >= 3) {
fontWeight = '900';
- background = score < 0 ? '#ACD1EC' : '#E8B0B2';
+ background = score < 0 ? "--pmg-spam-high-neg" : "--pmg-spam-high-pos";
} else if (absScore >= 1.5) {
fontWeight = '600';
} else if (absScore <= 0.1) {
fontWeight = '200';
- background = score < 0 ? '#EEF6FB' : '#FAEFF0';
+ background = score < 0 ? "--pmg-spam-low-neg" : "--pmg-spam-low-pos";
}
- metaData.tdStyle = `font-weight: ${fontWeight};background-color: ${background};`;
+
+ meta.tdStyle = `font-weight: ${fontWeight};background-color: var(${background});`;
return score;
},
summaryType: 'sum',
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (7 preceding siblings ...)
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables Stefan Sterz
@ 2023-03-09 8:01 ` Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
` (3 subsequent siblings)
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:01 UTC (permalink / raw)
To: pmg-devel
setting the background color in js code adds that property as a style
attribute to the element. that makes it hard to alter later via css
and makes it hard to dynamically change the color e.g. if we want to
add different themes. the background color for this element is white
already anyway, so just remove them here.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
js/Subscription.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/js/Subscription.js b/js/Subscription.js
index 8d3bc80..2293cdb 100644
--- a/js/Subscription.js
+++ b/js/Subscription.js
@@ -41,7 +41,6 @@ Ext.define('PMG.Subscription', {
itemId: 'system-report-view',
scrollable: true,
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
padding: '5px',
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (8 preceding siblings ...)
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
@ 2023-03-09 8:01 ` Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine Stefan Sterz
` (2 subsequent siblings)
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:01 UTC (permalink / raw)
To: pmg-devel
add support for switching the colors of the hourly mail distribution
chart based on css variables.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
js/HourlyMailDistribution.js | 36 ++++++++++++++++++++++++++++++++++++
1 file changed, 36 insertions(+)
diff --git a/js/HourlyMailDistribution.js b/js/HourlyMailDistribution.js
index a15b1a4..8aa5eb7 100644
--- a/js/HourlyMailDistribution.js
+++ b/js/HourlyMailDistribution.js
@@ -18,6 +18,27 @@ Ext.define('PMG.MailDistChart', {
fields: ['index'],
}],
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get colors
+ let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+ let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+ let primary = rootStyle.getPropertyValue("--pwt-chart-primary").trim() || "#000000";
+ let gridStroke = rootStyle.getPropertyValue("--pwt-chart-grid-stroke").trim() || "#dddddd";
+
+ // set the colors
+ me.setBackground(background);
+ me.axes.forEach((axis) => {
+ axis.setLabel({ color: text });
+ axis.setTitle({ color: text });
+ axis.setStyle({ strokeStyle: primary });
+ axis.setGrid({ stroke: gridStroke });
+ });
+ me.redraw();
+ },
+
initComponent: function() {
var me = this;
@@ -47,6 +68,21 @@ Ext.define('PMG.MailDistChart', {
},
},
});
+
+ me.checkThemeColors();
+
+ // switch colors on media query changes
+ me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+ me.themeListener = (e) => { me.checkThemeColors(); };
+ me.mediaQueryList.addEventListener("change", me.themeListener);
+ },
+
+ doDestroy: function() {
+ let me = this;
+
+ me.mediaQueryList.removeEventListener("change", me.themeListener);
+
+ me.callParent();
},
});
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (9 preceding siblings ...)
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
@ 2023-03-09 8:01 ` Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle Stefan Sterz
2023-03-09 8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:01 UTC (permalink / raw)
To: pmg-devel
enable the `autoDarkTheme` option for the mobile quarantine and add
minimal styling to correct the look of the logo and the mail preview
rendering. this makes the quarantine behave like the "auto" theme of
the main gui, it will change it's theme depending on a media query.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
css/ext6-pmg-mobile.css | 10 ++++++++++
js/mobile/app.js | 1 +
2 files changed, 11 insertions(+)
diff --git a/css/ext6-pmg-mobile.css b/css/ext6-pmg-mobile.css
index adbd88b..85954f9 100644
--- a/css/ext6-pmg-mobile.css
+++ b/css/ext6-pmg-mobile.css
@@ -44,3 +44,13 @@ img.logo-navbar {
font-size: 32px;
}
}
+
+@media (prefers-color-scheme: dark) {
+ img.logo-navbar {
+ filter: invert(100%) hue-rotate(180deg);
+ }
+
+ .page-content > iframe {
+ background-color: var(--f7-color-white-shade);
+ }
+}
diff --git a/js/mobile/app.js b/js/mobile/app.js
index f893780..9300607 100644
--- a/js/mobile/app.js
+++ b/js/mobile/app.js
@@ -3,6 +3,7 @@ app = new Framework7({
root: '#app',
init: false,
name: 'Proxmox Mail Gateway',
+ autoDarkTheme: true,
routes: [
{
path: '/:path/:subpath?',
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (10 preceding siblings ...)
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine Stefan Sterz
@ 2023-03-09 8:01 ` Stefan Sterz
2023-03-09 8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
12 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:01 UTC (permalink / raw)
To: pmg-devel
this allows toggling the presentation of the email previews depending
on the current theme. in the default "light" mode the toggle is hidden
to avoid clutter. enable the toggle in other themes to allow switching
back to the original way the email was rendered.
this requires a bump of the widget toolkit. the toolkit provides the
styles necessary for the toggle to work.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
i'm not a hundred percent certain about this commit, as i outlined in
the cover letter there is a potentially better solution. however,
handling the "theming" in the api endpoint would mean handling the
theme cookie there as well to properly detect the current theme and
could then not be easily toggled from the gui.
there are ways of injecting addtional css into an iframe, but i
personally find that a bit "hacky". so im happy for further
suggestions for this part of the series.
js/AttachmentQuarantine.js | 7 +++
js/SpamQuarantine.js | 7 +++
js/VirusQuarantine.js | 7 +++
js/controller/QuarantineController.js | 65 +++++++++++++++++++++++++++
4 files changed, 86 insertions(+)
diff --git a/js/AttachmentQuarantine.js b/js/AttachmentQuarantine.js
index 4e9bb80..6e9e546 100644
--- a/js/AttachmentQuarantine.js
+++ b/js/AttachmentQuarantine.js
@@ -107,6 +107,13 @@ Ext.define('PMG.AttachmentQuarantine', {
enableToggle: true,
iconCls: 'fa fa-file-code-o',
},
+ {
+ xtype: 'button',
+ reference: 'themeToggle',
+ text: gettext('Toggle Theme'),
+ enableToggle: true,
+ iconCls: 'fa fa-paint-brush',
+ },
'->',
{
xtype: 'button',
diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
index 1608f18..093413d 100644
--- a/js/SpamQuarantine.js
+++ b/js/SpamQuarantine.js
@@ -224,6 +224,13 @@ Ext.define('PMG.SpamQuarantine', {
enableToggle: true,
iconCls: 'fa fa-bullhorn',
},
+ {
+ xtype: 'button',
+ reference: 'themeToggle',
+ text: gettext('Toggle Theme'),
+ enableToggle: true,
+ iconCls: 'fa fa-paint-brush',
+ },
'->',
{
xtype: 'button',
diff --git a/js/VirusQuarantine.js b/js/VirusQuarantine.js
index 65c4fda..08bd7d9 100644
--- a/js/VirusQuarantine.js
+++ b/js/VirusQuarantine.js
@@ -120,6 +120,13 @@ Ext.define('PMG.VirusQuarantine', {
enableToggle: true,
iconCls: 'fa fa-file-code-o',
},
+ {
+ xtype: 'button',
+ reference: 'themeToggle',
+ text: gettext('Toggle Theme'),
+ enableToggle: true,
+ iconCls: 'fa fa-paint-brush',
+ },
'->',
{
xtype: 'button',
diff --git a/js/controller/QuarantineController.js b/js/controller/QuarantineController.js
index 5058300..15e69fa 100644
--- a/js/controller/QuarantineController.js
+++ b/js/controller/QuarantineController.js
@@ -33,6 +33,36 @@ Ext.define('PMG.controller.QuarantineController', {
preview.update(`<h3 style="padding-left:5px;">${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`);
},
+ toggleTheme: function(button) {
+ let preview = this.lookup('preview');
+ this.themed = !this.themed;
+
+ if (this.themed) {
+ preview.addCls("pmg-mail-preview-themed");
+ } else {
+ preview.removeCls("pmg-mail-preview-themed");
+ }
+ },
+
+ hideThemeToggle: function(argument) {
+ let me = this;
+ let themeButton = me.lookup("themeToggle");
+ themeButton.disable();
+ themeButton.hide();
+ me.themed = true;
+ me.toggleTheme();
+ },
+
+ showThemeToggle: function(argument) {
+ let me = this;
+ let themeButton = me.lookup("themeToggle");
+ me.themed = false;
+ me.toggleTheme();
+ themeButton.setPressed(true);
+ themeButton.enable();
+ themeButton.show();
+ },
+
toggleRaw: function(button) {
let me = this;
let list = me.lookupReference('list');
@@ -160,10 +190,45 @@ Ext.define('PMG.controller.QuarantineController', {
}
},
+ beforeRender: function() {
+ let me = this;
+ let currentTheme = Ext.util.Cookies.get("PMGThemeCookie");
+
+ if (currentTheme === "auto") {
+ me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+
+ me.themeListener = (e) => {
+ if (e.matches) {
+ me.showThemeToggle();
+ } else {
+ me.hideThemeToggle();
+ }
+ };
+
+ me.themeListener(me.mediaQueryList);
+ me.mediaQueryList.addEventListener("change", me.themeListener);
+ } else if (currentTheme === "__default__") {
+ me.hideThemeToggle();
+ } else {
+ me.showThemeToggle();
+ }
+ },
+
+ destroy: function() {
+ let me = this;
+
+ me.mediaQueryList?.removeEventListener("change", me.themeListener);
+
+ me.callParent();
+ },
+
control: {
'button[reference=raw]': {
click: 'toggleRaw',
},
+ 'button[reference=themeToggle]': {
+ click: 'toggleTheme',
+ },
'pmgQuarantineList': {
selectionChange: 'onSelectMail',
itemkeypress: 'keyPress',
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (11 preceding siblings ...)
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle Stefan Sterz
@ 2023-03-09 8:02 ` Stefan Sterz
2023-03-23 16:11 ` [pmg-devel] applied: " Thomas Lamprecht
12 siblings, 1 reply; 22+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:02 UTC (permalink / raw)
To: pmg-devel
adds dark mode support to the api viewer that is activated depending
on the users theme preference. similar to the main gui's "auto"
theme.
this needs a bump of the widget toolkit so the dark-theme css is
present.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
api-viewer/index.html | 1 +
1 file changed, 1 insertion(+)
diff --git a/api-viewer/index.html b/api-viewer/index.html
index 346fa38..4d708ef 100644
--- a/api-viewer/index.html
+++ b/api-viewer/index.html
@@ -6,6 +6,7 @@
<title>Proxmox Mail Gateway 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" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="apidoc.js"></script>
</head>
--
2.30.2
^ permalink raw reply [flat|nested] 22+ messages in thread
* Re: [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
@ 2023-03-10 10:14 ` Dominik Csapak
2023-03-10 10:24 ` Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
1 sibling, 1 reply; 22+ messages in thread
From: Dominik Csapak @ 2023-03-10 10:14 UTC (permalink / raw)
To: Stefan Sterz, pmg-devel, Thomas Lamprecht, Stoiko Ivanov
replying here for the whole pmg part of the series
all in all LGTM
besides apart from some minor stuff that
can be done as a follow-up:
* in some parts the indentation is wrong
* the mobile quarantine has still white dialogs
(seems to be a bug in the framework7 version we use, updating
to a current version seems non-trivial since we're 3 major
versions behind, i can do it of course if wanted)
* regarding the quarantine theme toggle:
why should it not be possible to have a theme toggle when we respect the cookie?
we can just read the parameter and as a fallback rely on the cookie?
imho that would be a cleaner solution than inverting the whole mail
if these points are not a problem @Thomas/@Stoiko, consider the pmg part
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by: Dominik Csapak <d.csapak@proxmox.com>
^ permalink raw reply [flat|nested] 22+ messages in thread
* Re: [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes
2023-03-10 10:14 ` Dominik Csapak
@ 2023-03-10 10:24 ` Stefan Sterz
0 siblings, 0 replies; 22+ messages in thread
From: Stefan Sterz @ 2023-03-10 10:24 UTC (permalink / raw)
To: Dominik Csapak, pmg-devel, Thomas Lamprecht, Stoiko Ivanov
On 3/10/23 11:14, Dominik Csapak wrote:
> replying here for the whole pmg part of the series
>
> all in all LGTM
>
> besides apart from some minor stuff that
> can be done as a follow-up:
>
> * in some parts the indentation is wrong
> * the mobile quarantine has still white dialogs
> (seems to be a bug in the framework7 version we use, updating
> to a current version seems non-trivial since we're 3 major
> versions behind, i can do it of course if wanted)
i noticed that too, there are other issues that i still need to fix too
(e.g., the logo on the login screen). but yeah, updating is probably the
way to go here. since the mobile quarantine also displays the mail with
a white background at the moment, i considered the dialogs a minor issue
in comparison. i can also take a look at updating framework7 once i got
some other fix-ups out.
> * regarding the quarantine theme toggle:
> why should it not be possible to have a theme toggle when we respect
> the cookie?
> we can just read the parameter and as a fallback rely on the cookie?
> imho that would be a cleaner solution than inverting the whole mail
>
well, you'd need to reload the mail preview with every toggle, afaict.
that's what i meant with "not easily". but yes, that would be possible.
hence, my comment in that patch.
> if these points are not a problem @Thomas/@Stoiko, consider the pmg part
>
> Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
> Tested-by: Dominik Csapak <d.csapak@proxmox.com>
>
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] applied: [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
@ 2023-03-15 15:42 ` Thomas Lamprecht
0 siblings, 0 replies; 22+ messages in thread
From: Thomas Lamprecht @ 2023-03-15 15:42 UTC (permalink / raw)
To: Stefan Sterz, pmg-devel
Am 09/03/2023 um 09:00 schrieb Stefan Sterz:
> adds a theme switcher to the main view and quarantine so that users
> can choose a theme.
>
> this requires a bump to the widget toolkit so the necessary widget are
> present.
>
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
> js/MainView.js | 8 ++++++++
> js/QuarantineView.js | 12 ++++++++++++
> pmg-index.html.tt | 7 +++++++
> 3 files changed, 27 insertions(+)
>
>
applied pmg-gui series, thanks!
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] applied: [PATCH pmg-api v1] proxy: add support for switching themes
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
2023-03-10 10:14 ` Dominik Csapak
@ 2023-03-15 15:42 ` Thomas Lamprecht
1 sibling, 0 replies; 22+ messages in thread
From: Thomas Lamprecht @ 2023-03-15 15:42 UTC (permalink / raw)
To: Stefan Sterz, pmg-devel
Am 09/03/2023 um 09:00 schrieb Stefan Sterz:
> parse the theme cookie so users can switch between themes in the ui
>
> this requires a bump of the pmg-gui, which in turn needs a bump for
> the widget toolkit, so the parameters passed to the template are
> handled appropriately.
>
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
> src/PMG/Service/pmgproxy.pm | 16 +++++++++++++++-
> 1 file changed, 15 insertions(+), 1 deletion(-)
>
>
applied, thanks!
^ permalink raw reply [flat|nested] 22+ messages in thread
* [pmg-devel] applied: [PATCH pmg-docs v1] docs: add dark mode support to the api viewer
2023-03-09 8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
@ 2023-03-23 16:11 ` Thomas Lamprecht
0 siblings, 0 replies; 22+ messages in thread
From: Thomas Lamprecht @ 2023-03-23 16:11 UTC (permalink / raw)
To: Stefan Sterz, pmg-devel
Am 09/03/2023 um 09:02 schrieb Stefan Sterz:
> adds dark mode support to the api viewer that is activated depending
> on the users theme preference. similar to the main gui's "auto"
> theme.
>
> this needs a bump of the widget toolkit so the dark-theme css is
> present.
>
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
> api-viewer/index.html | 1 +
> 1 file changed, 1 insertion(+)
>
>
applied, thanks!
^ permalink raw reply [flat|nested] 22+ messages in thread
end of thread, other threads:[~2023-03-23 16:12 UTC | newest]
Thread overview: 22+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
2023-03-10 10:14 ` Dominik Csapak
2023-03-10 10:24 ` Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle Stefan Sterz
2023-03-09 8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-23 16:11 ` [pmg-devel] applied: " Thomas Lamprecht
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox