* [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme
@ 2023-03-08 16:18 Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
` (5 more replies)
0 siblings, 6 replies; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme
2023-03-08 16:18 [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
@ 2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pve-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
` (4 subsequent siblings)
5 siblings, 0 replies; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme
2023-03-08 16:18 [pve-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 ` [pve-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
` (3 subsequent siblings)
5 siblings, 0 replies; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color
2023-03-08 16:18 [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pve-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 ` [pve-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 ` [pve-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pve-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
` (2 subsequent siblings)
5 siblings, 2 replies; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching
2023-03-08 16:36 ` [pve-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 ` [pve-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
1 sibling, 0 replies; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the dark theme and dynamic theme switching
2023-03-08 16:36 ` [pve-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pve-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; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector
2023-03-08 16:18 [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (2 preceding siblings ...)
2023-03-08 16:36 ` [pve-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 ` [pve-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
2023-03-08 17:04 ` [pve-devel] applied-series: [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
5 siblings, 1 reply; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle
2023-03-08 16:37 ` [pve-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; 18+ 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] 18+ messages in thread
* [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme
2023-03-08 16:18 [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (3 preceding siblings ...)
2023-03-08 16:37 ` [pve-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
@ 2023-03-08 16:40 ` Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 2/4] pveproxy/template: add support for switching themes Stefan Sterz
` (4 more replies)
2023-03-08 17:04 ` [pve-devel] applied-series: [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
5 siblings, 5 replies; 18+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:40 UTC (permalink / raw)
To: pve-devel
From: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
this requires a bump of the widget toolkit so the version includes the
necessary widgets.
Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
www/manager6/Workspace.js | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 0c8869a7..78ab37b6 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -395,6 +395,14 @@ Ext.define('PVE.StdWorkspace', {
me.selectById('root');
},
},
+ {
+ iconCls: 'fa fa-paint-brush',
+ text: gettext('Theme'),
+ handler: function() {
+ Ext.create('Proxmox.window.ThemeEditWindow')
+ .show();
+ },
+ },
{
iconCls: 'fa fa-language',
text: gettext('Language'),
--
2.30.2
^ permalink raw reply [flat|nested] 18+ messages in thread
* [pve-devel] [PATCH manager v1 2/4] pveproxy/template: add support for switching themes
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
@ 2023-03-08 16:40 ` Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 3/4] subscription/summary/backup: stop setting the background color Stefan Sterz
` (3 subsequent siblings)
4 siblings, 0 replies; 18+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:40 UTC (permalink / raw)
To: pve-devel
load the dark theme only if requested through a cookie, also adds
support for the "auto" theme that uses the dark theme based on a
media query.
this requires a bump of the widget toolkit so the dark-theme css file
is available.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
PVE/Service/pveproxy.pm | 13 +++++++++++++
www/index.html.tpl | 8 ++++++++
2 files changed, 21 insertions(+)
diff --git a/PVE/Service/pveproxy.pm b/PVE/Service/pveproxy.pm
index f73fdd6f..3fd76128 100755
--- a/PVE/Service/pveproxy.pm
+++ b/PVE/Service/pveproxy.pm
@@ -88,6 +88,7 @@ sub init {
add_dirs($dirs, '/xtermjs/' => "$basedirs->{xtermjs}/");
add_dirs($dirs, '/pwt/images/' => "$basedirs->{widgettoolkit}/images/");
add_dirs($dirs, '/pwt/css/' => "$basedirs->{widgettoolkit}/css/");
+ add_dirs($dirs, '/pwt/themes/' => "$basedirs->{widgettoolkit}/themes/");
$self->{server_config} = {
title => 'Proxmox VE API',
@@ -191,6 +192,7 @@ sub get_index {
my $lang;
my $username;
my $token = 'null';
+ my $theme = "";
if (my $cookie = $r->header('Cookie')) {
if (my $newlang = ($cookie =~ /(?:^|\s)PVELangCookie=([^;]*)/)[0]) {
@@ -198,6 +200,15 @@ sub get_index {
$lang = $newlang;
}
}
+
+ if (my $newtheme = ($cookie =~ /(?:^|\s)PVEThemeCookie=([^;]*)/)[0]) {
+ # theme names need to be kebab case, with each segment a maximum of 10 characters long
+ # and at most 6 segments
+ if ($newtheme =~ m/^[a-z]{1,10}(-[a-z]{1,10}){0,5}$/) {
+ $theme = $newtheme;
+ }
+ }
+
my $ticket = PVE::APIServer::Formatter::extract_auth_value($cookie, $server->{cookie_name});
if (($username = PVE::AccessControl::verify_ticket($ticket, 1))) {
$token = PVE::AccessControl::assemble_csrf_prevention_token($username);
@@ -252,6 +263,8 @@ sub get_index {
debug => $debug,
version => "$version",
wtversion => $wtversion,
+ theme => $theme,
+ auto => $theme == "auto",
};
# by default, load the normal index
diff --git a/www/index.html.tpl b/www/index.html.tpl
index 0c819977..be31dd40 100644
--- a/www/index.html.tpl
+++ b/www/index.html.tpl
@@ -12,6 +12,14 @@
<link rel="stylesheet" type="text/css" href="/pve2/fa/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/pve2/css/ext6-pve.css?ver=[% version %]" />
<link rel="stylesheet" type="text/css" href="/pwt/css/ext6-pmx.css?ver=[% wtversion %]" />
+ [%- IF theme %]
+ [%- IF theme == 'auto' %]
+ <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/pwt/themes/theme-proxmox-dark.css?ver=[% wtversion %]" />
+ [%- ELSE %]
+ <link rel="stylesheet" type="text/css" href="/pwt/themes/theme-[% theme %].css?ver=[% wtversion %]" />
+ [%- END -%]
+ [%- END -%]
+
[% IF langfile %]
<script type='text/javascript' src='/pve2/locale/pve-lang-[% lang %].js?ver=[% version %]'></script>
[%- ELSE %]
--
2.30.2
^ permalink raw reply [flat|nested] 18+ messages in thread
* [pve-devel] [PATCH manager v1 3/4] subscription/summary/backup: stop setting the background color
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 2/4] pveproxy/template: add support for switching themes Stefan Sterz
@ 2023-03-08 16:40 ` Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 4/4] ui: make ceph charts change color more dynamically Stefan Sterz
` (2 subsequent siblings)
4 siblings, 0 replies; 18+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:40 UTC (permalink / raw)
To: pve-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>
---
www/manager6/node/Subscription.js | 1 -
www/manager6/node/Summary.js | 1 -
www/manager6/window/BackupConfig.js | 1 -
3 files changed, 3 deletions(-)
diff --git a/www/manager6/node/Subscription.js b/www/manager6/node/Subscription.js
index 3b53c7e2..5ca36d42 100644
--- a/www/manager6/node/Subscription.js
+++ b/www/manager6/node/Subscription.js
@@ -40,7 +40,6 @@ Ext.define('PVE.node.Subscription', {
itemId: 'system-report-view',
scrollable: true,
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
padding: '5px',
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index 320f2247..03512d70 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -18,7 +18,6 @@ Ext.define('PVE.node.Summary', {
id: 'pkgversions',
padding: 5,
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
},
diff --git a/www/manager6/window/BackupConfig.js b/www/manager6/window/BackupConfig.js
index ca61b1e4..48649efc 100644
--- a/www/manager6/window/BackupConfig.js
+++ b/www/manager6/window/BackupConfig.js
@@ -10,7 +10,6 @@ Ext.define('PVE.window.BackupConfig', {
itemId: 'configtext',
autoScroll: true,
style: {
- 'background-color': 'white',
'white-space': 'pre',
'font-family': 'monospace',
padding: '5px',
--
2.30.2
^ permalink raw reply [flat|nested] 18+ messages in thread
* [pve-devel] [PATCH manager v1 4/4] ui: make ceph charts change color more dynamically
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 2/4] pveproxy/template: add support for switching themes Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 3/4] subscription/summary/backup: stop setting the background color Stefan Sterz
@ 2023-03-08 16:40 ` Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-08 17:05 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
4 siblings, 0 replies; 18+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:40 UTC (permalink / raw)
To: pve-devel
add support for setting the background and text color via css. also
allows for dynamically switching the color when a theme change is
detected.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
www/manager6/ceph/StatusDetail.js | 35 +++++++++++++++++++++++++++++-
www/manager6/panel/RunningChart.js | 29 +++++++++++++++++++++++++
2 files changed, 63 insertions(+), 1 deletion(-)
diff --git a/www/manager6/ceph/StatusDetail.js b/www/manager6/ceph/StatusDetail.js
index 88b1775c..d6c0763b 100644
--- a/www/manager6/ceph/StatusDetail.js
+++ b/www/manager6/ceph/StatusDetail.js
@@ -199,6 +199,18 @@ Ext.define('PVE.ceph.StatusDetail', {
},
],
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get color
+ let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+
+ // set the colors
+ me.chart.setBackground(background);
+ me.chart.redraw();
+ },
+
updateAll: function(metadata, status) {
let me = this;
me.suspendLayout = true;
@@ -257,7 +269,7 @@ Ext.define('PVE.ceph.StatusDetail', {
me.statecategories[result].states.push(state);
});
- me.getComponent('pgchart').getStore().setData(me.statecategories);
+ me.chart.getStore().setData(me.statecategories);
me.getComponent('pgs').update({ states: pgs_by_state });
let health = status.health || {};
@@ -303,5 +315,26 @@ Ext.define('PVE.ceph.StatusDetail', {
me.suspendLayout = false;
me.updateLayout();
},
+
+ initComponent: function() {
+ var me = this;
+ me.callParent();
+
+ me.chart = me.getComponent('pgchart');
+ 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();
+ },
});
diff --git a/www/manager6/panel/RunningChart.js b/www/manager6/panel/RunningChart.js
index 19db8b50..d89a6ecb 100644
--- a/www/manager6/panel/RunningChart.js
+++ b/www/manager6/panel/RunningChart.js
@@ -98,6 +98,20 @@ Ext.define('PVE.widget.RunningChart', {
// show the last x seconds default is 5 minutes
timeFrame: 5*60,
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get color
+ let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+ let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+
+ // set the colors
+ me.chart.setBackground(background);
+ me.chart.valuesprite.setAttributes({ fillStyle: text }, true);
+ me.chart.redraw();
+ },
+
addDataPoint: function(value, time) {
let view = this.chart;
let panel = view.up();
@@ -156,5 +170,20 @@ Ext.define('PVE.widget.RunningChart', {
stroke: me.color,
});
}
+
+ 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] 18+ messages in thread
* [pve-devel] [PATCH docs v1] docs: add dark mode support to the api viewer
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
` (2 preceding siblings ...)
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 4/4] ui: make ceph charts change color more dynamically Stefan Sterz
@ 2023-03-08 16:40 ` Stefan Sterz
2023-03-08 17:05 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
4 siblings, 0 replies; 18+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:40 UTC (permalink / raw)
To: pve-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 requires a bumps of the widget toolkit so the loaded css file 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 8528420..006e64b 100644
--- a/api-viewer/index.html
+++ b/api-viewer/index.html
@@ -6,6 +6,7 @@
<title>Proxmox VE 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] 18+ messages in thread
* [pve-devel] applied-series: [PATCH widget-toolkit v1] Proxmox Dark Theme
2023-03-08 16:18 [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
` (4 preceding siblings ...)
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
@ 2023-03-08 17:04 ` Thomas Lamprecht
5 siblings, 0 replies; 18+ 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] 18+ messages in thread
* [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
` (3 preceding siblings ...)
2023-03-08 16:40 ` [pve-devel] [PATCH docs v1] docs: add dark mode support to the api viewer Stefan Sterz
@ 2023-03-08 17:05 ` Thomas Lamprecht
2023-03-09 8:07 ` [pve-devel] Shell command and Emacs Lisp code injection in emacsclient-mail.desktop Stefan Sterz
4 siblings, 1 reply; 18+ messages in thread
From: Thomas Lamprecht @ 2023-03-08 17:05 UTC (permalink / raw)
To: Proxmox VE development discussion, Stefan Sterz
Am 08/03/2023 um 17:40 schrieb Stefan Sterz:
> From: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
>
> this requires a bump of the widget toolkit so the version includes the
> necessary widgets.
>
> Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
> www/manager6/Workspace.js | 8 ++++++++
> 1 file changed, 8 insertions(+)
>
>
applied series, huge thanks to you and Daniel again!
we might want to make auto default rather quickly ;-)
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: [pve-devel] Shell command and Emacs Lisp code injection in emacsclient-mail.desktop
2023-03-08 17:05 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
@ 2023-03-09 8:07 ` Stefan Sterz
2023-03-09 8:16 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
0 siblings, 1 reply; 18+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:07 UTC (permalink / raw)
To: Thomas Lamprecht, Proxmox VE development discussion
On 3/8/23 18:05, Thomas Lamprecht wrote:
> Am 08/03/2023 um 17:40 schrieb Stefan Sterz:
>> From: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
>>
>> this requires a bump of the widget toolkit so the version includes the
>> necessary widgets.
>>
>> Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
>> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
>> ---
>> www/manager6/Workspace.js | 8 ++++++++
>> 1 file changed, 8 insertions(+)
>>
>>
>
> applied series, huge thanks to you and Daniel again!
>
> we might want to make auto default rather quickly ;-)
yes that might make sense. my intention was to not "surprise" existing
users with a potentially unwanted overhaul of the gui. however, im not
sure how relevant that concern is, as it is fairly easy to switch back
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme
2023-03-09 8:07 ` [pve-devel] Shell command and Emacs Lisp code injection in emacsclient-mail.desktop Stefan Sterz
@ 2023-03-09 8:16 ` Thomas Lamprecht
2023-03-09 8:29 ` Stefan Sterz
0 siblings, 1 reply; 18+ messages in thread
From: Thomas Lamprecht @ 2023-03-09 8:16 UTC (permalink / raw)
To: Stefan Sterz, Proxmox VE development discussion
Am 09/03/2023 um 09:07 schrieb Stefan Sterz:
> On 3/8/23 18:05, Thomas Lamprecht wrote:
>> we might want to make auto default rather quickly ;-)
>
> yes that might make sense. my intention was to not "surprise" existing
> users with a potentially unwanted overhaul of the gui. however, im not
> sure how relevant that concern is, as it is fairly easy to switch back
IMO not a concern as it only changes for those whose browser already tells our
web UI to prefer a dark-color scheme, so while it might come as a "surprise",
I think it's safe to say that it'll be a welcomed one - as it'd be odd if they
configured their OS and/or Browser to prefer the dark mode, if they don't.
ps. something funky happened with your subject (pasted by mistake?)
^ permalink raw reply [flat|nested] 18+ messages in thread
* Re: [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme
2023-03-09 8:16 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
@ 2023-03-09 8:29 ` Stefan Sterz
0 siblings, 0 replies; 18+ messages in thread
From: Stefan Sterz @ 2023-03-09 8:29 UTC (permalink / raw)
To: Thomas Lamprecht, Proxmox VE development discussion
On 3/9/23 09:16, Thomas Lamprecht wrote:
> Am 09/03/2023 um 09:07 schrieb Stefan Sterz:
>> On 3/8/23 18:05, Thomas Lamprecht wrote:
>>> we might want to make auto default rather quickly ;-)
>>
>> yes that might make sense. my intention was to not "surprise" existing
>> users with a potentially unwanted overhaul of the gui. however, im not
>> sure how relevant that concern is, as it is fairly easy to switch back
>
>
> IMO not a concern as it only changes for those whose browser already tells our
> web UI to prefer a dark-color scheme, so while it might come as a "surprise",
> I think it's safe to say that it'll be a welcomed one - as it'd be odd if they
> configured their OS and/or Browser to prefer the dark mode, if they don't.
>
sure, ill send a follow-up then :)
>
> ps. something funky happened with your subject (pasted by mistake?)
>
yeah ok i probably messed something up over here o.O not sure why this
happened i didn't mess with the subject line at all.
^ permalink raw reply [flat|nested] 18+ messages in thread
end of thread, other threads:[~2023-03-09 8:29 UTC | newest]
Thread overview: 18+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-03-08 16:18 [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pve-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pve-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pve-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 ` [pve-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pve-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
2023-03-08 16:37 ` [pve-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 2/4] pveproxy/template: add support for switching themes Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 3/4] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH manager v1 4/4] ui: make ceph charts change color more dynamically Stefan Sterz
2023-03-08 16:40 ` [pve-devel] [PATCH docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-08 17:05 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
2023-03-09 8:07 ` [pve-devel] Shell command and Emacs Lisp code injection in emacsclient-mail.desktop Stefan Sterz
2023-03-09 8:16 ` [pve-devel] applied-series: [PATCH manager v1 1/4] gui: create user info menu intro for selecting the theme Thomas Lamprecht
2023-03-09 8:29 ` Stefan Sterz
2023-03-08 17:04 ` [pve-devel] applied-series: [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox