Style Arrow Heads Edge Markers with CSS Variables

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>

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 = {

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}

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;