From: Stefan Sterz <s.sterz@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine
Date: Thu, 9 Mar 2023 09:01:26 +0100 [thread overview]
Message-ID: <20230309080126.29894-1-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com>
enable the `autoDarkTheme` option for the mobile quarantine and add
minimal styling to correct the look of the logo and the mail preview
rendering. this makes the quarantine behave like the "auto" theme of
the main gui, it will change it's theme depending on a media query.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
css/ext6-pmg-mobile.css | 10 ++++++++++
js/mobile/app.js | 1 +
2 files changed, 11 insertions(+)
diff --git a/css/ext6-pmg-mobile.css b/css/ext6-pmg-mobile.css
index adbd88b..85954f9 100644
--- a/css/ext6-pmg-mobile.css
+++ b/css/ext6-pmg-mobile.css
@@ -44,3 +44,13 @@ img.logo-navbar {
font-size: 32px;
}
}
+
+@media (prefers-color-scheme: dark) {
+ img.logo-navbar {
+ filter: invert(100%) hue-rotate(180deg);
+ }
+
+ .page-content > iframe {
+ background-color: var(--f7-color-white-shade);
+ }
+}
diff --git a/js/mobile/app.js b/js/mobile/app.js
index f893780..9300607 100644
--- a/js/mobile/app.js
+++ b/js/mobile/app.js
@@ -3,6 +3,7 @@ app = new Framework7({
root: '#app',
init: false,
name: 'Proxmox Mail Gateway',
+ autoDarkTheme: true,
routes: [
{
path: '/:path/:subpath?',
--
2.30.2
next prev parent reply other threads:[~2023-03-09 8:02 UTC|newest]
Thread overview: 22+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
2023-03-10 10:14 ` Dominik Csapak
2023-03-10 10:24 ` Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
2023-03-09 8:01 ` Stefan Sterz [this message]
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle Stefan Sterz
2023-03-09 8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-23 16:11 ` [pmg-devel] applied: " Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230309080126.29894-1-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pmg-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox