Keep darkmode state in serverside session too. Fix darkmode state in egroupware iframes.

api/js/framework/fw_base.js

@@ -1320,7 +1320,21 @@ var fw_base = (function(){ "use strict"; return Class.extend(
 	 */
 	_setDarkMode: function(_state)
 	{
-		jQuery('html').attr('data-darkmode', _state);
+		let state = _state == '0' ?'0':'1';
-		egw.setSessionItem('api', 'darkmode',_state == '0' ?'0':'1');
+		jQuery('html').attr('data-darkmode', state);
+		jQuery('iframe').each((i, frame) =>{
+			try {
+				if (frame && frame.contentWindow && frame.contentWindow.jQuery)
+				{
+					frame.contentWindow.jQuery('html').attr('data-darkmode', _state == 0?'':'1');
+				}
+			}catch(e)
+			{
+
+			}
+
+		})
+		egw.setSessionItem('api', 'darkmode',state);
+		egw.json('EGroupware\\Api\\Framework\\Ajax::ajax_set_darkmode_flag',[state]).sendRequest();
 	}
 });}).call(this);

api/js/jsapi/app_base.js

@@ -180,8 +180,6 @@ var AppJS = (function(){ "use strict"; return Class.extend(
 		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

api/js/jsapi/egw_app.js

@@ -116,8 +116,6 @@ var EgwApp = /** @class */ (function () {
         this._fix_iFrameScrolling();
         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();

api/js/jsapi/egw_app.ts

@@ -206,8 +206,6 @@ export abstract class EgwApp
 		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

api/src/Framework.php

@@ -534,7 +534,7 @@ abstract class Framework extends Framework\Extra
 			'dir_code'			=> lang('language_direction_rtl') != 'rtl' ? '' : ' dir="rtl"',
 			'include_wz_tooltip'=> $include_wz_tooltip,
 			'webserver_url'     => $GLOBALS['egw_info']['server']['webserver_url'],
-			'darkmode'		=> $this->isTop()? $GLOBALS['egw_info']['user']['preferences']['common']['darkmode'] : ''
+			'darkmode'		=>  !empty(Cache::getSession('api','darkmode')) ?? $GLOBALS['egw_info']['user']['preferences']['common']['darkmode']
 		);
 	}
 

api/src/Framework/Ajax.php

@@ -731,6 +731,15 @@ abstract class Ajax extends Api\Framework
 		}
 	}
 
+	/**
+	 * keep darkmode flag on session
+	 * @param $_mode
+	 */
+	public static function ajax_set_darkmode_flag($_mode)
+	{
+		Api\Cache::setSession('api', 'darkmode', $_mode);
+	}
+
 	/**
 	 * Stores the user defined sorting of the applications inside the preferences
 	 *

pixelegg/css/mobile.css

@@ -80,6 +80,7 @@
   }
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery,
+  html[data-darkmode='1'] iframe,
   html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active,
   html[data-darkmode='1'] video,
   html[data-darkmode='1'] #loginMainDiv,
@@ -7041,6 +7042,12 @@ form[id^="ranking-"] .dialogHeadbar {
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
   background-image: url(../images/topmenu_items/access.svg);
 }
+#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_calls {
+  background-image: url(../images/phone.svg);
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position-x: -2px;
+}
 div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item td.sub_item_icon img[src*="svg"] {
   background-color: transparent;
   background-image: none;

pixelegg/css/monochrome.css

@@ -58,6 +58,7 @@
   }
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery,
+  html[data-darkmode='1'] iframe,
   html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active,
   html[data-darkmode='1'] video,
   html[data-darkmode='1'] #loginMainDiv,

pixelegg/css/pixelegg.css

@@ -69,6 +69,7 @@
   }
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery,
+  html[data-darkmode='1'] iframe,
   html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active,
   html[data-darkmode='1'] video,
   html[data-darkmode='1'] #loginMainDiv,

pixelegg/less/darkmode.less

@@ -31,7 +31,7 @@
     position: fixed; // ATM Firefox doesn't like filter:invert on none fixed html
     filter: invert(1) hue-rotate(180deg) brightness(0.7);
     img, #blueimp-gallery,
-    #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active,
+    iframe, #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active,
     video, #loginMainDiv, .et2_taglist_tags_icon {
       filter: invert(1) hue-rotate(180deg) !important;
     }

pixelegg/mobile/fw_mobile.css

@@ -43,6 +43,7 @@
   }
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery,
+  html[data-darkmode='1'] iframe,
   html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active,
   html[data-darkmode='1'] video,
   html[data-darkmode='1'] #loginMainDiv,
@@ -6875,6 +6876,12 @@ span.egw_tutorial_title {
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
   background-image: url(../images/topmenu_items/access.svg);
 }
+#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_calls {
+  background-image: url(../images/phone.svg);
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position-x: -2px;
+}
 div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item td.sub_item_icon img[src*="svg"] {
   background-color: transparent;
   background-image: none;