From b9570b9b60a4436ccb5264473008c6f1f8d376bb Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 27 Jan 2021 12:26:37 +0100
Subject: [PATCH] Some fixes for darkmode: - Fix darkmode not switched in
 popups - Fix a quick white page shown before switching to darkmode when it's
 set to 'auto'

---
 api/js/jsapi/app_base.js    | 9 ++++++---
 api/js/jsapi/egw_app.js     | 7 ++++---
 api/js/jsapi/egw_app.ts     | 9 ++++++---
 pixelegg/css/pixelegg.css   | 6 ++++++
 pixelegg/less/darkmode.less | 6 ++++++
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/api/js/jsapi/app_base.js b/api/js/jsapi/app_base.js
index b93bb5e188..2c17b19a01 100644
--- a/api/js/jsapi/app_base.js
+++ b/api/js/jsapi/app_base.js
@@ -177,12 +177,15 @@ var AppJS = (function(){ "use strict"; return Class.extend(
 		}
 		this.et2 = et2.widgetContainer;
 		this._fix_iFrameScrolling();
-		if (this.egw && this.egw.is_popup()) this._set_Window_title();
+		if (this.egw && this.egw.is_popup())
+		{
+			this._set_Window_title();
+			// apply theme mode
+			jQuery('html').attr('data-darkmode', egw.getSessionItem('api', 'darkmode') == '0'?'0':'1');
+		}
 
 		// Highlights the favorite based on initial list state
 		this.highlight_favorite();
-
-
 	},
 
 	/**
diff --git a/api/js/jsapi/egw_app.js b/api/js/jsapi/egw_app.js
index d596a2348a..75c6111e86 100644
--- a/api/js/jsapi/egw_app.js
+++ b/api/js/jsapi/egw_app.js
@@ -113,12 +113,13 @@ var EgwApp = /** @class */ (function () {
         }
         this.et2 = et2.widgetContainer;
         this._fix_iFrameScrolling();
-        if (this.egw && this.egw.is_popup())
+        if (this.egw && this.egw.is_popup()) {
             this._set_Window_title();
+            // apply theme mode
+            jQuery('html').attr('data-darkmode', egw.getSessionItem('api', 'darkmode') == '0' ? '0' : '1');
+        }
         // Highlights the favorite based on initial list state
         this.highlight_favorite();
-        // apply theme mode
-        window.framework._setDarkMode(egw.getSessionItem('api', 'darkmode'));
     };
     /**
      * Observer method receives update notifications from all applications
diff --git a/api/js/jsapi/egw_app.ts b/api/js/jsapi/egw_app.ts
index ed26e25474..251a7488e5 100644
--- a/api/js/jsapi/egw_app.ts
+++ b/api/js/jsapi/egw_app.ts
@@ -203,12 +203,15 @@ export abstract class EgwApp
 		}
 		this.et2 = et2.widgetContainer;
 		this._fix_iFrameScrolling();
-		if (this.egw && this.egw.is_popup()) this._set_Window_title();
+		if (this.egw && this.egw.is_popup())
+		{
+			this._set_Window_title();
+			// apply theme mode
+			jQuery('html').attr('data-darkmode', egw.getSessionItem('api', 'darkmode') == '0'?'0':'1');
+		}
 
 		// Highlights the favorite based on initial list state
 		this.highlight_favorite();
-		// apply theme mode
-		window.framework._setDarkMode(egw.getSessionItem('api', 'darkmode'));
 	}
 
 	/**
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index d81c9e491f..915d80085a 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -46,6 +46,12 @@
  * @package pixelegg
  * @version $Id$
  */
+@media (prefers-color-scheme: dark) {
+  html[data-darkmode='2'] {
+    background: #000;
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
 /**
  * DARK THEME
  */
diff --git a/pixelegg/less/darkmode.less b/pixelegg/less/darkmode.less
index 050e92b0dd..7b3c432b2b 100644
--- a/pixelegg/less/darkmode.less
+++ b/pixelegg/less/darkmode.less
@@ -10,6 +10,12 @@
  * @version $Id$
  */
 
+@media (prefers-color-scheme: dark) {
+  html[data-darkmode='2'] {
+    background: #000;
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
 /**
  * DARK THEME
  */