Adjust SvelteFlow and allow for null to use CSS variable

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} />

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;
 };
 

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();
 

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

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;
   }