[pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine

[Stefan Sterz]

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 at 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;
     }
 }
+
+ at 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