Use dark color scheme for schema graph in browser preview

generate-schema-graph.js

@@ -201,30 +201,30 @@ function markForeignKeyColumns(tables, edges) {
 }
 
 const EDGE_COLORS = [
-  '#c53030',
+  '#ff6b6b',
-  '#2f855a',
+  '#6bdf9a',
-  '#2b6cb0',
+  '#5aa7ff',
-  '#b7791f',
+  '#f5c15c',
-  '#6b46c1',
+  '#c79bff',
-  '#c05621',
+  '#ff9f5a',
-  '#319795',
+  '#5cd6d6',
-  '#97266d',
+  '#ff7fc2',
-  '#4c51bf',
+  '#8f95ff',
-  '#276749',
+  '#58d18a',
-  '#9c4221',
+  '#ff8f66',
-  '#0987a0',
+  '#4fc4e8',
-  '#553c9a',
+  '#a98cff',
-  '#742a2a',
+  '#ff6f6f',
-  '#22543d',
+  '#4ecb8f',
-  '#1a365d',
+  '#5aa7e6',
-  '#702459',
+  '#ff7aa8',
-  '#744210',
+  '#e0b25a',
-  '#285e61',
+  '#56c8c8',
-  '#d53f8c',
+  '#ff5f9e',
-  '#dd6b20',
+  '#ffb25a',
-  '#38a169',
+  '#56d68a',
-  '#3182ce',
+  '#66b3ff',
-  '#805ad5',
+  '#c79bff',
 ];
 
 function edgeKey(edge) {
@@ -371,15 +371,16 @@ const CLUSTERS = [
 ];
 
 const COLORS = {
-  background: '#ebf4ff',
+  background: '#1e2430',
-  tableBorder: '#a0aec0',
+  tableBorder: '#3f4c5f',
-  headerBg: '#bee3f8',
+  headerBg: '#33415c',
-  headerText: '#1a365d',
+  headerText: '#e2e8f0',
-  rowBg: '#ffffff',
+  rowBg: '#2a3242',
-  rowBgAlt: '#f7fafc',
+  rowBgAlt: '#272e3d',
-  keyBg: '#ebf8ff',
+  keyBg: '#2b3a52',
-  text: '#2d3748',
+  text: '#d8dee9',
-  muted: '#718096',
+  muted: '#8b95a7',
+  clusterFill: '#202a3a',
 };
 
 /**
@@ -825,7 +826,7 @@ function buildDot(tables, edges, positions = null, anchors = null) {
     lines.push(`  subgraph cluster_${cluster.id} {`);
     lines.push(
       `    label="${escapeHtml(cluster.label)}"; labeljust="l"; fontsize=15;`,
-      `    style="rounded,filled"; fillcolor="#ffffff60"; color="${COLORS.tableBorder}";`,
+      `    style="rounded,filled"; fillcolor="${COLORS.clusterFill}"; color="${COLORS.tableBorder}";`,
       `    fontcolor="${COLORS.headerText}"; margin=14;`
     );
 
@@ -1040,8 +1041,15 @@ const optimized = optimizeAnchorsWithLayout(
   baseAnchors
 );
 
+// Fill the whole canvas (including Graphviz's pad margin) so there is no
+// transparent/white gutter around the dark graph when opened in a browser.
+const finalsvg = optimized.svg.replace(
+  /<svg([^>]*?)>/,
+  `<svg$1 style="background-color:${COLORS.background};">`
+);
+
 writeFileSync(dotOutputPath, optimized.dot, 'utf8');
-writeFileSync(outputPath, optimized.svg, 'utf8');
+writeFileSync(outputPath, finalsvg, 'utf8');
 
 const dim = optimized.svg.match(/width="([\d.]+)pt" height="([\d.]+)pt"/);