From 85c6266a0eda7d24b4e46ecfd1dbe814551488d5 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 28 Jul 2025 13:27:21 +0200
Subject: [PATCH 1/9] Style Arrow Heads Edge Markers with CSS Variables

---
 .../src/routes/examples/edges/+page.svelte    | 40 +++++++++++++++++++
 .../container/EdgeRenderer/MarkerSymbols.tsx  | 36 ++++++-----------
 .../MarkerDefinition/Marker.svelte            |  8 ++--
 packages/system/src/styles/init.css           |  7 ++++
 4 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 18c21a14..7649d63e 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -51,6 +51,18 @@
 			type: 'output',
 			data: { label: 'Output 9' },
 			position: { x: 675, y: 500 }
+		},
+		{
+			id: '10',
+			type: 'output',
+			data: { label: 'Output 10' },
+			position: { x: 825, y: 400 }
+		},
+		{
+			id: '11',
+			type: 'output',
+			data: { label: 'Output 11' },
+			position: { x: 825, y: 300 }
 		}
 	]);
 
@@ -129,6 +141,27 @@
 			label: 'hi',
 			labelStyle: 'background: red; font-weight: 700; padding: 5px;',
 			style: 'stroke: #ffcc0'
+		},
+		{
+			id: 'e4-10',
+			source: '4',
+			target: '10',
+			label: 'Explicit Red Color (should override CSS)',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				color: '#ff0000'
+			}
+		},
+		{
+			id: 'e4-11',
+			source: '4',
+			target: '11',
+			label: 'No Explicit Color (should use CSS variable)',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				// To use CSS variable, set color to null
+				color: null
+			}
 		}
 	]);
 
@@ -163,3 +196,10 @@
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
 </SvelteFlow>
+
+<style>
+	:global(.svelte-flow) {
+		--xy-edge-stroke-width: 4;
+		--xy-edge-stroke: #00ff00;
+	}
+</style>
diff --git a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
index 6b59d04e..974d009e 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -6,33 +6,21 @@ import { useStoreApi } from '../../hooks/useStore';
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
-    <polyline
-      style={{
-        stroke: color,
-        strokeWidth,
-      }}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      points="-5,-4 0,0 -5,4"
-    />
-  );
+  const style = {
+    strokeWidth,
+    ...(color !== 'none' && { stroke: color, fill: color }),
+  };
+
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
 };
 
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
-    <polyline
-      style={{
-        stroke: color,
-        fill: color,
-        strokeWidth,
-      }}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      points="-5,-4 0,0 -5,4 -5,-4"
-    />
-  );
+  const style = {
+    strokeWidth,
+    ...(color !== 'none' && { stroke: color, fill: color }),
+  };
+
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;
 };
 
 export const MarkerSymbols = {
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index 71412ec0..da670557 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
@@ -11,6 +11,9 @@
     color,
     strokeWidth
   }: MarkerProps = $props();
+
+  // Create inline styles when explicit color is provided
+  const polylineStyle = color ? `stroke: ${color}; fill: ${color};` : '';
 </script>
 
 <marker
@@ -26,7 +29,7 @@
 >
   {#if type === MarkerType.Arrow}
     <polyline
-      stroke={color}
+      style={polylineStyle}
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}
@@ -35,11 +38,10 @@
     />
   {:else if type === MarkerType.ArrowClosed}
     <polyline
-      stroke={color}
+      style={polylineStyle}
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}
-      fill={color}
       points="-5,-4 0,0 -5,4 -5,-4"
     />
   {/if}
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 2d342000..b1a7d14b 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -165,6 +165,13 @@
     user-select: none;
   }
 }
+
+/* Arrowhead marker styles - use CSS custom properties as default */
+.xy-flow__arrowhead polyline {
+  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+}
+
 .xy-flow__connection {
   pointer-events: none;
 

From a4fc108bbbe0f43881ebc012b18ce613149c50b5 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 28 Jul 2025 13:35:30 +0200
Subject: [PATCH 2/9] react test

---
 examples/react/src/examples/Edges/index.tsx | 86 +++++++++++++++------
 1 file changed, 64 insertions(+), 22 deletions(-)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index 6e18d24a..5ef76859 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -70,6 +70,18 @@ const initialNodes: Node[] = [
     data: { label: 'Output 10' },
     position: { x: 50, y: 400 },
   },
+  {
+    id: '11',
+    type: 'output',
+    data: { label: 'Output 11' },
+    position: { x: 825, y: 400 },
+  },
+  {
+    id: '12',
+    type: 'output',
+    data: { label: 'Output 12' },
+    position: { x: 825, y: 300 },
+  },
 ];
 
 const initialEdges: Edge[] = [
@@ -182,6 +194,26 @@ const initialEdges: Edge[] = [
       height: 20,
     },
   },
+  {
+    id: 'e4-11',
+    source: '4',
+    target: '11',
+    label: 'Explicit Red Color (should override CSS)',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ff0000',
+    },
+  },
+  {
+    id: 'e4-12',
+    source: '4',
+    target: '12',
+    label: 'No Explicit Color (should use CSS variable)',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: null,
+    },
+  },
 ];
 
 const edgeTypes: EdgeTypes = {
@@ -205,28 +237,38 @@ const EdgesFlow = () => {
   const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onNodeClick={onNodeClick}
-      onConnect={onConnect}
-      onNodeDragStop={onNodeDragStop}
-      snapToGrid={true}
-      edgeTypes={edgeTypes}
-      onEdgeClick={onEdgeClick}
-      onEdgeDoubleClick={onEdgeDoubleClick}
-      onEdgeMouseEnter={onEdgeMouseEnter}
-      onEdgeMouseMove={onEdgeMouseMove}
-      onEdgeMouseLeave={onEdgeMouseLeave}
-      onDelete={console.log}
-      defaultEdgeOptions={defaultEdgeOptions}
-    >
-      <MiniMap />
-      <Controls />
-      <Background />
-    </ReactFlow>
+    <div style={{ height: '100vh' }}>
+      <style>
+        {`
+          .react-flow {
+            --xy-edge-stroke-width: 4;
+            --xy-edge-stroke: #00ff00;
+          }
+        `}
+      </style>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onConnect={onConnect}
+        onNodeDragStop={onNodeDragStop}
+        snapToGrid={true}
+        edgeTypes={edgeTypes}
+        onEdgeClick={onEdgeClick}
+        onEdgeDoubleClick={onEdgeDoubleClick}
+        onEdgeMouseEnter={onEdgeMouseEnter}
+        onEdgeMouseMove={onEdgeMouseMove}
+        onEdgeMouseLeave={onEdgeMouseLeave}
+        onDelete={console.log}
+        defaultEdgeOptions={defaultEdgeOptions}
+      >
+        <MiniMap />
+        <Controls />
+        <Background />
+      </ReactFlow>
+    </div>
   );
 };
 

From 0a0d171daa7654330235cdbb9f80fd7f7a9d11a8 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 28 Jul 2025 16:05:20 +0200
Subject: [PATCH 3/9] update examples

---
 examples/react/src/examples/Edges/index.tsx   | 14 ++++++++-----
 .../src/routes/examples/edges/+page.svelte    | 20 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index 5ef76859..820a48c5 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -198,20 +198,22 @@ const initialEdges: Edge[] = [
     id: 'e4-11',
     source: '4',
     target: '11',
-    label: 'Explicit Red Color (should override CSS)',
+    label: 'Explicit Blue Prop Color (should override CSS)',
+    className: 'css-variable-edge',
     markerEnd: {
       type: MarkerType.ArrowClosed,
-      color: '#ff0000',
+      color: '#0000ff',
     },
   },
   {
     id: 'e4-12',
     source: '4',
     target: '12',
-    label: 'No Explicit Color (should use CSS variable)',
+    label: 'Marker No Prop Color (should use CSS variable)',
+    className: 'css-variable-edge',
     markerEnd: {
       type: MarkerType.ArrowClosed,
-      color: null,
+      color: undefined,
     },
   },
 ];
@@ -240,10 +242,12 @@ const EdgesFlow = () => {
     <div style={{ height: '100vh' }}>
       <style>
         {`
+          /* Test CSS variables on specific edges */
           .react-flow {
-            --xy-edge-stroke-width: 4;
+            --xy-edge-stroke-width: 1;
             --xy-edge-stroke: #00ff00;
           }
+
         `}
       </style>
       <ReactFlow
diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 7649d63e..6ec6a70d 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -146,20 +146,19 @@
 			id: 'e4-10',
 			source: '4',
 			target: '10',
-			label: 'Explicit Red Color (should override CSS)',
+			label: 'Explicit Prop Blue Color (should override CSS)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				color: '#ff0000'
+				color: '#0000ff'
 			}
 		},
 		{
 			id: 'e4-11',
 			source: '4',
 			target: '11',
-			label: 'No Explicit Color (should use CSS variable)',
+			label: 'Marker No Prop Color (should use CSS variable)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				// To use CSS variable, set color to null
 				color: null
 			}
 		}
@@ -174,6 +173,15 @@
 		return `edge-${connection.source}-${connection.target}}`;
 	}
 
+	const defaultEdgeOptions = {
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+			color: 'red',
+			width: 20,
+			height: 20
+		}
+	};
+
 	$inspect(edges);
 </script>
 
@@ -182,6 +190,7 @@
 	bind:edges
 	{edgeTypes}
 	fitView
+	{defaultEdgeOptions}
 	nodeDragThreshold={2}
 	onbeforeconnect={(connection) => {
 		console.log('on edge create', connection);
@@ -198,8 +207,9 @@
 </SvelteFlow>
 
 <style>
+	/* Test CSS variables on the marker SVG container */
 	:global(.svelte-flow) {
-		--xy-edge-stroke-width: 4;
+		--xy-edge-stroke-width: 1;
 		--xy-edge-stroke: #00ff00;
 	}
 </style>

From d6e5135c7c574b175c12b6dc6c244f8ecc8fe850 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 28 Jul 2025 16:30:53 +0200
Subject: [PATCH 4/9] make it more visible

---
 examples/react/src/examples/Edges/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index 820a48c5..8239f202 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -203,6 +203,8 @@ const initialEdges: Edge[] = [
     markerEnd: {
       type: MarkerType.ArrowClosed,
       color: '#0000ff',
+      width: 40,
+      height: 40,
     },
   },
   {
@@ -214,6 +216,8 @@ const initialEdges: Edge[] = [
     markerEnd: {
       type: MarkerType.ArrowClosed,
       color: undefined,
+      width: 40,
+      height: 40,
     },
   },
 ];
@@ -239,7 +243,7 @@ const EdgesFlow = () => {
   const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
-    <div style={{ height: '100vh' }}>
+    <>
       <style>
         {`
           /* Test CSS variables on specific edges */
@@ -272,7 +276,7 @@ const EdgesFlow = () => {
         <Controls />
         <Background />
       </ReactFlow>
-    </div>
+    </>
   );
 };
 

From 8cb54fbf46330a27d099c7db3c8a82a16afdc2c9 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 29 Jul 2025 12:45:34 +0200
Subject: [PATCH 5/9] tighter check

---
 examples/svelte/src/routes/examples/edges/+page.svelte    | 8 ++++++--
 .../react/src/container/EdgeRenderer/MarkerSymbols.tsx    | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 6ec6a70d..ab22159f 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -149,7 +149,9 @@
 			label: 'Explicit Prop Blue Color (should override CSS)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				color: '#0000ff'
+				color: '#0000ff',
+				width: 40,
+				height: 40
 			}
 		},
 		{
@@ -159,7 +161,9 @@
 			label: 'Marker No Prop Color (should use CSS variable)',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
-				color: null
+				color: undefined,
+				width: 40,
+				height: 40
 			}
 		}
 	]);
diff --git a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
index 90ef1228..3321d4cd 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -8,7 +8,7 @@ type SymbolProps = Omit<EdgeMarker, 'type'>;
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color !== 'none' && { stroke: color, fill: color }),
+    ...(color && color !== 'none' && { stroke: color, fill: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
@@ -17,7 +17,7 @@ const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color !== 'none' && { stroke: color, fill: color }),
+    ...(color && color !== 'none' && { stroke: color, fill: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;

From 4c389117b7aa7180278bbc3883d7a76d0afc487d Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 11 Aug 2025 13:02:16 +0200
Subject: [PATCH 6/9] allow null and correct behavior

---
 examples/react/src/examples/Edges/index.tsx   | 40 ++++++++++++++++++-
 .../container/EdgeRenderer/MarkerSymbols.tsx  |  4 +-
 packages/react/src/types/component-props.ts   | 10 ++++-
 packages/system/src/types/edges.ts            |  2 +-
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index 8239f202..c4f9fb69 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -82,6 +82,18 @@ const initialNodes: Node[] = [
     data: { label: 'Output 12' },
     position: { x: 825, y: 300 },
   },
+  {
+    id: '13',
+    type: 'output',
+    data: { label: 'Output 13' },
+    position: { x: 900, y: 200 },
+  },
+  {
+    id: '14',
+    type: 'output',
+    data: { label: 'Output 14' },
+    position: { x: 825, y: 100 },
+  },
 ];
 
 const initialEdges: Edge[] = [
@@ -211,7 +223,7 @@ const initialEdges: Edge[] = [
     id: 'e4-12',
     source: '4',
     target: '12',
-    label: 'Marker No Prop Color (should use CSS variable)',
+    label: 'Marker explicitly undefined Color (defaults to none)',
     className: 'css-variable-edge',
     markerEnd: {
       type: MarkerType.ArrowClosed,
@@ -220,6 +232,31 @@ const initialEdges: Edge[] = [
       height: 40,
     },
   },
+  {
+    id: 'e4-13',
+    source: '4',
+    target: '13',
+    label: 'Marker null Color (should use `--xy-edge-stroke` CSS variable)',
+    className: 'css-variable-edge',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: null,
+      width: 40,
+      height: 40,
+    },
+  },
+  {
+    id: 'e4-14',
+    source: '4',
+    target: '14',
+    label: 'Marker implicitly undefined Color (defaults to defaultMarkerColor)',
+    className: 'css-variable-edge',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 40,
+      height: 40,
+    },
+  },
 ];
 
 const edgeTypes: EdgeTypes = {
@@ -271,6 +308,7 @@ const EdgesFlow = () => {
         onEdgeMouseLeave={onEdgeMouseLeave}
         onDelete={console.log}
         defaultEdgeOptions={defaultEdgeOptions}
+        defaultMarkerColor={'purple'}
       >
         <MiniMap />
         <Controls />
diff --git a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
index 3321d4cd..089cda47 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -8,7 +8,7 @@ type SymbolProps = Omit<EdgeMarker, 'type'>;
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color && color !== 'none' && { stroke: color, fill: color }),
+    ...(color && { stroke: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
@@ -17,7 +17,7 @@ const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color && color !== 'none' && { stroke: color, fill: color }),
+    ...(color && { stroke: color, fill: color }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 16d4aa58..e0948739 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -139,7 +139,12 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * This event fires when the user releases the source or target of an editable edge. It is called
    * even if an edge update does not occur.
    */
-  onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType, connectionState: FinalConnectionState) => void;
+  onReconnectEnd?: (
+    event: MouseEvent | TouchEvent,
+    edge: EdgeType,
+    handleType: HandleType,
+    connectionState: FinalConnectionState
+  ) => void;
   /**
    * Use this event handler to add interactivity to a controlled flow.
    * It is called on node drag, select, and move.
@@ -494,9 +499,10 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   nodeExtent?: CoordinateExtent;
   /**
    * Color of edge markers.
+   * You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
    * @default '#b1b1b7'
    */
-  defaultMarkerColor?: string;
+  defaultMarkerColor?: string | null;
   /**
    * Controls if the viewport should zoom by scrolling inside the container.
    * @default true
diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts
index 03001d75..42678f8c 100644
--- a/packages/system/src/types/edges.ts
+++ b/packages/system/src/types/edges.ts
@@ -91,7 +91,7 @@ export enum ConnectionLineType {
  */
 export type EdgeMarker = {
   type: MarkerType | `${MarkerType}`;
-  color?: string;
+  color?: string | null;
   width?: number;
   height?: number;
   markerUnits?: string;

From d060c3fa876c8ba315797700c8baaebdbb51b611 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 11 Aug 2025 13:59:38 +0200
Subject: [PATCH 7/9] Adjust SvelteFlow and allow for null to use CSS variable

---
 .../src/routes/examples/edges/+page.svelte    | 40 ++++++++++++++++++-
 .../EdgeRenderer/MarkerDefinitions.tsx        |  2 +-
 .../MarkerDefinition/Marker.svelte            |  2 +-
 .../src/lib/container/SvelteFlow/types.ts     |  3 +-
 packages/system/src/utils/marker.ts           |  2 +-
 5 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index ab22159f..17d46823 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -63,6 +63,18 @@
 			type: 'output',
 			data: { label: 'Output 11' },
 			position: { x: 825, y: 300 }
+		},
+		{
+			id: '12',
+			type: 'output',
+			data: { label: 'Output 12' },
+			position: { x: 900, y: 200 }
+		},
+		{
+			id: '13',
+			type: 'output',
+			data: { label: 'Output 13' },
+			position: { x: 825, y: 100 }
 		}
 	]);
 
@@ -158,13 +170,38 @@
 			id: 'e4-11',
 			source: '4',
 			target: '11',
-			label: 'Marker No Prop Color (should use CSS variable)',
+			label: 'Marker explicitly undefined Color (defaults to none)',
+			className: 'css-variable-edge',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
 				color: undefined,
 				width: 40,
 				height: 40
 			}
+		},
+		{
+			id: 'e4-12',
+			source: '4',
+			target: '12',
+			label: 'Marker null Color (should use `--xy-edge-stroke` CSS variable)',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				color: null,
+				width: 40,
+				height: 40
+			}
+		},
+		{
+			id: 'e4-13',
+			source: '4',
+			target: '13',
+			label: 'Marker implicitly undefined Color (defaults to defaultMarkerColor)',
+			className: 'css-variable-edge',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				width: 40,
+				height: 40
+			}
 		}
 	]);
 
@@ -204,6 +241,7 @@
 			id: getEdgeId(connection)
 		};
 	}}
+	defaultMarkerColor={'purple'}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
index 1c12775d..3cc39267 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -5,7 +5,7 @@ import { useStore } from '../../hooks/useStore';
 import { useMarkerSymbol } from './MarkerSymbols';
 
 type MarkerDefinitionsProps = {
-  defaultColor: string;
+  defaultColor: string | null;
   rfId?: string;
 };
 
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index da670557..d032ee35 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
@@ -8,7 +8,7 @@
     height = 12.5,
     markerUnits = 'strokeWidth',
     orient = 'auto-start-reverse',
-    color,
+    color = 'none',
     strokeWidth
   }: MarkerProps = $props();
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index ae8cd79f..5cd4b740 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -230,9 +230,10 @@ export type SvelteFlowProps<
      */
     snapGrid?: SnapGrid;
     /** Color of edge markers
+     * You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
      * @example "#b1b1b7"
      */
-    defaultMarkerColor?: string;
+    defaultMarkerColor?: string | null;
     /**
      * Controls if all nodes should be draggable
      * @default true
diff --git a/packages/system/src/utils/marker.ts b/packages/system/src/utils/marker.ts
index 834f17ef..9c150192 100644
--- a/packages/system/src/utils/marker.ts
+++ b/packages/system/src/utils/marker.ts
@@ -26,7 +26,7 @@ export function createMarkerIds(
     defaultMarkerEnd,
   }: {
     id?: string | null;
-    defaultColor?: string;
+    defaultColor?: string | null;
     defaultMarkerStart?: EdgeMarkerType;
     defaultMarkerEnd?: EdgeMarkerType;
   }

From daa33fb3bd40427e8f26117da4dbcd2de726cfde Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 11 Aug 2025 14:03:30 +0200
Subject: [PATCH 8/9] chore(changeset): add

---
 .changeset/thirty-owls-float.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/thirty-owls-float.md

diff --git a/.changeset/thirty-owls-float.md b/.changeset/thirty-owls-float.md
new file mode 100644
index 00000000..bc2ef74e
--- /dev/null
+++ b/.changeset/thirty-owls-float.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Make arrow heads markers fallback to --xy-edge-stroke CSS variable when passing null as marker color

From cab68834927dc45bad13869448ae0355e60553fb Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 11 Aug 2025 15:33:56 +0200
Subject: [PATCH 9/9] fix default svelte color

---
 packages/svelte/src/lib/store/initial-store.svelte.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index a2d1ea68..702e155e 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -365,7 +365,9 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
 
     selectNodesOnDrag: boolean = $derived(signals.props.selectNodesOnDrag ?? true);
 
-    defaultMarkerColor: string = $derived(signals.props.defaultMarkerColor ?? '#b1b1b7');
+    defaultMarkerColor: string | null = $derived(
+      signals.props.defaultMarkerColor === undefined ? '#b1b1b7' : signals.props.defaultMarkerColor
+    );
     markers: MarkerProps[] = $derived.by(() => {
       return createMarkerIds(signals.edges, {
         defaultColor: this.defaultMarkerColor,