mobile quarantine: add dark theme support to the mobile quarantine

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>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by:  Dominik Csapak <d.csapak@proxmox.com>

diff --git a/css/ext6-pmg-mobile.css b/css/ext6-pmg-mobile.css
index adbd88b027867a366f3090d91907921c7ed14c01..85954f99dfb12b6363854f6987867be7f1cb57af 100644 (file)
--- 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 f8937809944bfb2da2e75c944e05f2c72ef804a1..9300607104dda5755e2d34848e6233b17e4cbe7d 100644 (file)
--- 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?',