Change the explain plan SVG colors based on the theme. Fixed some minor color issues in the analysis tab.

web/pgadmin/misc/static/explain/js/explain.js

@@ -764,6 +764,7 @@ define('pgadmin.misc.explain', [
         isSubPlan = (this.get('Parent Relationship') === 'SubPlan');
 
       var planData = this.toJSON();
+      var colorFg = getComputedStyle(document.documentElement).getPropertyValue('--color-fg');
 
       _nodeExplainTableData(planData, _ctx);
 
@@ -811,6 +812,7 @@ define('pgadmin.misc.explain', [
         150, {
           'font-size': TXT_SIZE,
           'text-anchor': 'middle',
+          'fill': colorFg,
         }
       );
 
@@ -832,15 +834,16 @@ define('pgadmin.misc.explain', [
 
         var arrow_view_box = [0, 0, 2 * ARROW_WIDTH, 2 * ARROW_HEIGHT];
         var opts = {
-            stroke: '#000000',
+            stroke: colorFg,
             strokeWidth: arrow_size + 2,
           },
           subplanOpts = {
-            stroke: '#866486',
+            stroke: colorFg,
             strokeWidth: arrow_size + 2,
           },
           arrowOpts = {
             viewBox: arrow_view_box.join(' '),
+            fill: colorFg,
           };
 
         // Draw an arrow from current node to its parent
@@ -1161,12 +1164,13 @@ define('pgadmin.misc.explain', [
 
     draw: function(s, xpos, ypos, graphContainer, toolTipContainer, _ctx) {
       var g = s.g();
+      var colorBg = getComputedStyle(document.documentElement).getPropertyValue('--color-bg');
 
       //draw the border
       g.rect(
         0, 0, this.get('width') - 10, this.get('height') - 10, 5
       ).attr({
-        fill: '#FFF',
+        fill: colorBg,
       });
 
       var plan = this.get('Plan');

web/pgadmin/misc/static/explain/scss/_explain.scss

@@ -18,7 +18,6 @@
           position: absolute;
           top: 4px;
           margin-left: 4px;
-          opacity: 0.5;
 
           &.pg-explain-download-area.btn-group {
             left: 90px;
@@ -92,7 +91,7 @@ div.tab-pane[data-explain-tabpanel=table] {
           word-wrap: break-word;
         }
         &.pg-ex-highlighter {
-          color: $color-primary;
+          color: $color-fg;
         }
       }
       &.pga-ex-collapsible {
@@ -127,10 +126,3 @@ div.tab-pane[data-explain-tabpanel=statistics] {
     }
   }
 }
-
-/* Setting it to hardcoded white as the SVG generated is having white bg
- * Need to check what can be done.
- */
-.pgadmin-explain-container {
-  background-color: #fff;
-}

web/pgadmin/static/scss/pgadmin.scss

@@ -8,6 +8,7 @@ $theme-colors: (
 /* Certain variables are required in JS directly */
 :root {
   --color-fg: #{$color-fg};
+  --color-bg: #{$color-bg};
   --border-color: #{$border-color};
 }
 

web/pgadmin/static/scss/resources/dark/_theme.variables.scss

@@ -80,7 +80,7 @@ $color-editor-foldmarker: #0000FF !default;
 $color-editor-activeline: #50B0F0 !default;
 
 $explain-sev-2-bg: #ded17e;
-$explain-sev-3-bg: #c2812b;
+$explain-sev-3-bg: #824d18;
 $explain-sev-4-bg: #880000;
 $explain-sev-3-color: $color-fg;
 $explain-sev-4-color: $color-fg;