diagram color, export follows current theme

packages/web/src/designer/Designer.svelte

@@ -43,6 +43,9 @@
   import { apiCall } from '../utility/api';
   import moveDrag from '../utility/moveDrag';
   import { rectanglesHaveIntersection } from './designerMath';
+  import { showModal } from '../modals/modalTools';
+  import ChooseColorModal from '../modals/ChooseColorModal.svelte';
+  import { currentThemeDefinition } from '../stores';
 
   export let value;
   export let onChange;
@@ -371,6 +374,26 @@
     arrange(true, false, rect ? { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 } : null);
   };
 
+  const handleChangeTableColor = table => {
+    showModal(ChooseColorModal, {
+      onChange: color => {
+        callChange(current => {
+          return {
+            ...current,
+            tables: (current?.tables || []).map(table =>
+              table.isSelectedTable
+                ? {
+                    ...table,
+                    tableColor: color,
+                  }
+                : table
+            ),
+          };
+        });
+      },
+    });
+  };
+
   const performAutoActions = async db => {
     if (!db) return;
 
@@ -663,6 +686,8 @@
         filePath,
         html: domCanvas.outerHTML,
         css,
+        themeType: $currentThemeDefinition?.themeType,
+        themeClassName: $currentThemeDefinition?.className,
       });
     });
   }
@@ -723,6 +748,7 @@
         onChangeColumn={handleChangeColumn}
         onAddReferenceByColumn={handleAddReferenceByColumn}
         onAddAllReferences={handleAddTableReferences}
+        onChangeTableColor={handleChangeTableColor}
         onMoveReferences={recomputeReferencePositions}
         {table}
         onChangeTable={changeTable}

packages/web/src/designer/DesignerTable.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+  import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
+
   import { tick } from 'svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import { showModal } from '../modals/modalTools';
+  import { currentThemeDefinition } from '../stores';
   import contextMenu from '../utility/contextMenu';
   import moveDrag from '../utility/moveDrag';
   import ColumnLine from './ColumnLine.svelte';
-import { rectanglesHaveIntersection } from './designerMath';
   import DomTableRef from './DomTableRef';
 
   export let table;
@@ -20,6 +22,7 @@ import { rectanglesHaveIntersection } from './designerMath';
   export let onAddReferenceByColumn;
   export let onSelectColumn;
   export let onChangeColumn;
+  export let onChangeTableColor;
 
   export let onMoveStart;
   export let onMove;
@@ -105,6 +108,14 @@ import { rectanglesHaveIntersection } from './designerMath';
     }
   }
 
+  function getTableColorStyle(themeDef, table, colorIndex = 3) {
+    if (!table?.tableColor) return null;
+    const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+    const palette = palettes[table?.tableColor];
+    if (!palette) return null;
+    return `background: ${palette[colorIndex]}`;
+  }
+
   export function getDomTable() {
     const domRefs = { ...columnRefs };
     domRefs[''] = domWrapper;
@@ -141,6 +152,7 @@ import { rectanglesHaveIntersection } from './designerMath';
         },
       ],
       settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) },
+      settings?.allowChangeColor && { text: 'Change color', onClick: () => onChangeTableColor(table) },
     ];
   }
 </script>
@@ -169,6 +181,7 @@ import { rectanglesHaveIntersection } from './designerMath';
     class:isView={objectTypeField == 'views'}
     use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null}
     use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
+    style={getTableColorStyle($currentThemeDefinition, table)}
   >
     <div>{alias || pureName}</div>
     {#if settings?.showTableCloseButton}

packages/web/src/designer/DiagramDesigner.svelte

@@ -18,6 +18,7 @@
     canExport: true,
     canSelectColumns: false,
     canSelectTables: true,
+    allowChangeColor: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />

packages/web/src/designer/DiagramDesignerReference.svelte

@@ -91,4 +91,8 @@
     stroke: var(--theme-bg-4);
     stroke-width: 2;
   }
+
+  polygon {
+    fill: var(--theme-bg-4);
+  }
 </style>

packages/web/src/designer/QueryDesigner.svelte

@@ -18,6 +18,7 @@
     canExport: false,
     canSelectColumns: true,
     canSelectTables: false,
+    allowChangeColor: false,
   }}
   referenceComponent={QueryDesignerReference}
 />