allow null and correct behavior

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" />;

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

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;