From c105af939fd319bfad8de1dbb9eff8a8745dff00 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Mon, 21 Feb 2022 11:22:19 +0200
Subject: [PATCH] dark iframe fallback

---
 .../Espo/Resources/metadata/themes/Dark.json  |  1 +
 .../metadata/themes/DarkVertical.json         |  1 +
 client/src/theme-manager.js                   | 11 ++++++++++
 client/src/views/fields/wysiwyg.js            | 20 ++++++++++++++++++-
 frontend/less/espo/iframe/iframe.less         |  2 ++
 5 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/application/Espo/Resources/metadata/themes/Dark.json b/application/Espo/Resources/metadata/themes/Dark.json
index 00b8a87481..a0da1854cf 100644
--- a/application/Espo/Resources/metadata/themes/Dark.json
+++ b/application/Espo/Resources/metadata/themes/Dark.json
@@ -1,6 +1,7 @@
 {
     "stylesheet": "client/css/espo/dark.css",
     "stylesheetIframe": "client/css/espo/dark-iframe.css",
+    "stylesheetIframeFallback": "client/css/espo/hazyblue-iframe.css",
     "dashboardCellHeight": 155,
     "dashboardCellMargin": 19,
     "navbarHeight": 43,
diff --git a/application/Espo/Resources/metadata/themes/DarkVertical.json b/application/Espo/Resources/metadata/themes/DarkVertical.json
index c000b9a4fe..24c945af39 100644
--- a/application/Espo/Resources/metadata/themes/DarkVertical.json
+++ b/application/Espo/Resources/metadata/themes/DarkVertical.json
@@ -1,6 +1,7 @@
 {
     "stylesheet": "client/css/espo/dark-vertical.css",
     "stylesheetIframe": "client/css/espo/dark-vertical-iframe.css",
+    "stylesheetIframeFallback": "client/css/espo/hazyblue-iframe.css",
     "navbarIsVertical": true,
     "recordTopButtonsStickTop": 61,
     "recordTopButtonsBlockHeight": 21,
diff --git a/client/src/theme-manager.js b/client/src/theme-manager.js
index 281f5e8abb..b1f7e33882 100644
--- a/client/src/theme-manager.js
+++ b/client/src/theme-manager.js
@@ -95,6 +95,17 @@ define('theme-manager', [], function () {
             return link;
         },
 
+        getIframeFallbackStylesheet: function () {
+            let link = this.metadata.get(['themes', this.getName(), 'stylesheetIframeFallback']) ||
+                'client/css/espo/espo-iframe.css';
+
+            if (this.config.get('cacheTimestamp')) {
+                link += '?r=' + this.config.get('cacheTimestamp').toString();
+            }
+
+            return link;
+        },
+
         getParam: function (name) {
             return this.metadata.get(['themes', this.getName(), name]) || this.defaultParams[name] || null;
         },
diff --git a/client/src/views/fields/wysiwyg.js b/client/src/views/fields/wysiwyg.js
index a11c526ddb..954e05bd69 100644
--- a/client/src/views/fields/wysiwyg.js
+++ b/client/src/views/fields/wysiwyg.js
@@ -289,11 +289,17 @@ define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function
 
             var body = this.sanitizeHtml(this.model.get(this.name) || '');
 
+            let useFallbackStylesheet = this.getThemeManager().getParam('isDark') && this.htmlHasColors(body);
+
             var linkElement = iframeElement.contentWindow.document.createElement('link');
 
             linkElement.type = 'text/css';
             linkElement.rel = 'stylesheet';
-            linkElement.href = this.getBasePath() + this.getThemeManager().getIframeStylesheet();
+            linkElement.href = this.getBasePath() + (
+                useFallbackStylesheet ?
+                this.getThemeManager().getIframeFallbackStylesheet() :
+                this.getThemeManager().getIframeStylesheet()
+            );
 
             body = linkElement.outerHTML + body;
 
@@ -987,5 +993,17 @@ define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function
 
             });
         },
+
+        htmlHasColors: function (string) {
+            if (~string.indexOf('background-color:')) {
+                return true;
+            }
+
+            if (~string.indexOf('color:')) {
+                return true;
+            }
+
+            return false;
+        },
     });
 });
diff --git a/frontend/less/espo/iframe/iframe.less b/frontend/less/espo/iframe/iframe.less
index 2ea5a1c3fd..833f0e46aa 100644
--- a/frontend/less/espo/iframe/iframe.less
+++ b/frontend/less/espo/iframe/iframe.less
@@ -13,6 +13,8 @@ body {
     > blockquote:last-child {
         margin-bottom: 0;
     }
+
+    background-color: var(--panel-bg);
 }
 
 body {