Style Arrow Heads Edge Markers with CSS Variables

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;