Feat: dark mode (#3652)

* feat(react/svelte): add dark mode defaults

* refactor(darkmode): minimap, edges, edge labels

* chore(style): edge label color

* feat(colorMode): add colorMode prop light/dark/system

* chore(examples): cleanup

* test(colorMode): add tests

* chore(base.css): add dark base

* chore(examples): cleanup

packages/react/src/additional-components/Background/Patterns.tsx

@@ -26,6 +26,6 @@ type DotPatternProps = {
 
 export function DotPattern({ radius, className }: DotPatternProps) {
   return (
-    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dot', className])} />
+    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dots', className])} />
   );
 }

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { memo, useEffect, useRef, type MouseEvent, useCallback } from 'react';
+import { memo, useEffect, useRef, type MouseEvent, useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
@@ -40,15 +40,15 @@ const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMap({
   style,
   className,
-  nodeStrokeColor = 'transparent',
-  nodeColor = '#e2e2e2',
+  nodeStrokeColor,
+  nodeColor,
   nodeClassName = '',
   nodeBorderRadius = 5,
-  nodeStrokeWidth = 2,
+  nodeStrokeWidth,
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
   // a component properly.
   nodeComponent,
-  maskColor = 'rgb(240, 240, 240, 0.6)',
+  maskColor,
   maskStrokeColor = 'none',
   maskStrokeWidth = 1,
   position = 'bottom-right',
@@ -126,7 +126,15 @@ function MiniMap({
   return (
     <Panel
       position={position}
-      style={style}
+      style={
+        {
+          ...style,
+          '--minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
+          '--minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
+          '--minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
+        } as CSSProperties
+      }
       className={cc(['react-flow__minimap', className])}
       data-testid="rf__minimap"
     >
@@ -153,7 +161,6 @@ function MiniMap({
           className="react-flow__minimap-mask"
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
-          fill={maskColor}
           fillRule="evenodd"
           stroke={maskStrokeColor}
           strokeWidth={maskStrokeWidth}

packages/react/src/additional-components/MiniMap/MiniMapNode.tsx

@@ -31,9 +31,11 @@ function MiniMapNode({
       ry={borderRadius}
       width={width}
       height={height}
-      fill={fill}
-      stroke={strokeColor}
-      strokeWidth={strokeWidth}
+      style={{
+        fill,
+        stroke: strokeColor,
+        strokeWidth,
+      }}
       shapeRendering={shapeRendering}
       onClick={onClick ? (event) => onClick(event, id) : undefined}
     />

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -19,11 +19,11 @@ const selectorNodes = (s: ReactFlowState) =>
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
-  nodeStrokeColor = 'transparent',
-  nodeColor = '#e2e2e2',
+  nodeStrokeColor,
+  nodeColor,
   nodeClassName = '',
   nodeBorderRadius = 5,
-  nodeStrokeWidth = 2,
+  nodeStrokeWidth,
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
   // a component properly.
   nodeComponent: NodeComponent = MiniMapNode,
@@ -41,6 +41,8 @@ function MiniMapNodes({
     <>
       {nodes.map((node) => {
         const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+        const color = nodeColor === undefined ? undefined : nodeColorFunc(node);
+        const strokeColor = nodeStrokeColor === undefined ? undefined : nodeStrokeColorFunc(node);
 
         return (
           <NodeComponent
@@ -52,9 +54,9 @@ function MiniMapNodes({
             style={node.style}
             selected={!!node.selected}
             className={nodeClassNameFunc(node)}
-            color={nodeColorFunc(node)}
+            color={color}
             borderRadius={nodeBorderRadius}
-            strokeColor={nodeStrokeColorFunc(node)}
+            strokeColor={strokeColor}
             strokeWidth={nodeStrokeWidth}
             shapeRendering={shapeRendering}
             onClick={onClick}

packages/react/src/additional-components/MiniMap/types.ts

@@ -42,10 +42,10 @@ export type MiniMapNodeProps = {
   height: number;
   borderRadius: number;
   className: string;
-  color: string;
+  color?: string;
   shapeRendering: string;
-  strokeColor: string;
-  strokeWidth: number;
+  strokeColor?: string;
+  strokeWidth?: number;
   style?: CSSProperties;
   selected: boolean;
   onClick?: (event: MouseEvent, id: string) => void;