Bug fixed : canvas background colour is not consistent with the appli…

…ed theme (ToolJet#3956) * Bug fixed : canvas background colour is not consistent with the applied theme * bug fixed : canvas color is not consistent in the Viewer mode * reverting back changes made earlier * reverting back changes made earlier * bug fixed : canvas background in editor is not consistent with the applied theme * Bug fixed : Viewer component is not consistent with the applied theme
JPatil22 · Sep 9, 2022 · d3d2076 · d3d2076
1 parent b44732e
commit d3d2076
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
@@ -967,6 +967,14 @@ class Editor extends React.Component {
     return canvasBoundingRect?.height;
   };
 
+  computeCanvasBackgroundColor = () => {
+    const { canvasBackgroundColor } = this.state.appDefinition?.globalSettings ?? '#edeff5';
+    if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
+      return this.props.darkMode ? '#2f3c4c' : '#edeff5';
+    }
+    return canvasBackgroundColor;
+  };
+
   renderLayoutIcon = (isDesktopSelected) => {
     if (isDesktopSelected)
       return (
@@ -1351,7 +1359,7 @@ class Editor extends React.Component {
                       minHeight: +this.state.appDefinition.globalSettings.canvasMaxHeight,
                       maxWidth: +this.state.appDefinition.globalSettings.canvasMaxWidth,
                       maxHeight: +this.state.appDefinition.globalSettings.canvasMaxHeight,
-                      backgroundColor: this.state.appDefinition.globalSettings.canvasBackgroundColor,
+                      backgroundColor: this.computeCanvasBackgroundColor(),
                     }}
                   >
                     {config.ENABLE_MULTIPLAYER_EDITING && (

diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx
@@ -190,6 +190,16 @@ class Viewer extends React.Component {
     document.title = name ?? 'Untitled App';
   }
 
+  computeCanvasBackgroundColor = () => {
+    const resolvedBackgroundColor =
+      resolveReferences(this.state.appDefinition?.globalSettings?.backgroundFxQuery, this.state.currentState) ??
+      '#edeff5';
+    if (['#2f3c4c', '#edeff5'].includes(resolvedBackgroundColor)) {
+      return this.props.darkMode ? '#2f3c4c' : '#edeff5';
+    }
+    return resolvedBackgroundColor;
+  };
+
   changeDarkMode = (newMode) => {
     this.setState({
       currentState: {
@@ -264,14 +274,7 @@ class Viewer extends React.Component {
                       minHeight: +appDefinition.globalSettings?.canvasMaxHeight || 2400,
                       maxWidth: +appDefinition.globalSettings?.canvasMaxWidth || 1292,
                       maxHeight: +appDefinition.globalSettings?.canvasMaxHeight || 2400,
-                      backgroundColor: resolveReferences(
-                        appDefinition.globalSettings?.backgroundFxQuery,
-                        this.state.currentState
-                      )
-                        ? resolveReferences(appDefinition.globalSettings?.backgroundFxQuery, this.state.currentState)
-                        : appDefinition.globalSettings?.canvasBackgroundColor
-                        ? appDefinition.globalSettings?.canvasBackgroundColor
-                        : '#edeff5',
+                      backgroundColor: this.computeCanvasBackgroundColor(),
                     }}
                   >
                     {defaultComponentStateComputed && (