fix: set correct color theme on diagrams

src/components/gui/query-explanation-diagram/index.tsx

@@ -17,12 +17,14 @@ import { NestedLoop } from "./node-type/nested-loop";
 import { TableBlock } from "./node-type/table-block";
 import { OperationBlock } from "./node-type/operation-block";
 import { UnionBlock } from "./node-type/union-block";
+import { useTheme } from "next-themes";
 
 interface LayoutFlowProps {
   items: ExplanationMysql;
 }
 
 function QueryExplanationFlow(props: LayoutFlowProps) {
+  const { forcedTheme, resolvedTheme } = useTheme();
   const [loading, setLoading] = useState(true);
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
@@ -56,8 +58,11 @@ function QueryExplanationFlow(props: LayoutFlowProps) {
     }
   }, [props, loading, setEdges, setNodes]);
 
+  const appTheme = (forcedTheme ?? resolvedTheme) as "dark" | "light";
+
   return (
     <ReactFlow
+      colorMode={appTheme}
       nodes={nodes}
       edges={edges}
       onNodesChange={onNodesChange}

src/components/gui/tabs/relational-diagram-tab/index.tsx

@@ -27,6 +27,7 @@ import { useEffect, useState } from "react";
 import SchemaNameSelect from "../../schema-editor/schema-name-select";
 import { Toolbar } from "../../toolbar";
 import { DownloadImageDiagram } from "./download-image-diagram";
+import { useTheme } from "next-themes";
 
 const NODE_MARGIN = 50;
 const MAX_NODE_WIDTH = 300;
@@ -212,7 +213,7 @@ function mapSchema(
   const relationshipTopPosition =
     layoutRelationship.nodes.length === 0
       ? 0
-      : Math.min(...layoutRelationship.nodes.map((x) => x.position.y)) ?? 0;
+      : (Math.min(...layoutRelationship.nodes.map((x) => x.position.y)) ?? 0);
 
   // Calculate estimate area of the nodes without relationship
   const area =
@@ -279,6 +280,7 @@ function mapSchema(
 }
 
 function LayoutFlow() {
+  const { forcedTheme, resolvedTheme } = useTheme();
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const { schema: initialSchema, currentSchemaName, refresh } = useSchema();
@@ -297,6 +299,8 @@ function LayoutFlow() {
     databaseSchema: DatabaseSchemaNode,
   };
 
+  const appTheme = (forcedTheme ?? resolvedTheme) as "dark" | "light";
+
   return (
     <div className="relative flex h-full flex-col overflow-hidden">
       <div className="border-b pb-1">
@@ -368,14 +372,15 @@ function LayoutFlow() {
       {selectedSchema && (
         <div className="relative flex-1 overflow-hidden">
           <ReactFlow
+            colorMode={appTheme}
             nodes={nodes}
             edges={edges}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             fitView
             nodeTypes={nodeTypes}
           >
-            <Background />
+            <Background bgColor={appTheme === "dark" ? "#0a0a0a" : "white"} />
             <Controls />
             <MiniMap />
           </ReactFlow>