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

examples/react/src/App/routes.ts

@@ -1,5 +1,6 @@
 import Basic from '../examples/Basic';
 import Backgrounds from '../examples/Backgrounds';
+import ColorMode from '../examples/ColorMode';
 import ControlledUncontrolled from '../examples/ControlledUncontrolled';
 import ControlledViewport from '../examples/ControlledViewport';
 import CustomConnectionLine from '../examples/CustomConnectionLine';
@@ -62,6 +63,11 @@ const routes: IRoute[] = [
     path: 'backgrounds',
     component: Backgrounds,
   },
+  {
+    name: 'Color Mode',
+    path: 'color-mode',
+    component: ColorMode,
+  },
   {
     name: 'Cancel Connection',
     path: 'cancel-connection',

examples/react/src/examples/ColorMode/index.tsx

@@ -0,0 +1,88 @@
+import { ChangeEventHandler, useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  Node,
+  useNodesState,
+  useEdgesState,
+  OnConnect,
+  Edge,
+  MiniMap,
+  Background,
+  Controls,
+  Panel,
+  ColorMode,
+  Position,
+} from '@xyflow/react';
+
+const nodeDefaults = {
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+};
+
+const initialNodes: Node[] = [
+  { id: 'A', type: 'input', position: { x: 0, y: 150 }, data: { label: 'A' }, ...nodeDefaults },
+  { id: 'B', position: { x: 250, y: 0 }, data: { label: 'B' }, ...nodeDefaults },
+  { id: 'C', position: { x: 250, y: 150 }, data: { label: 'C' }, ...nodeDefaults },
+  { id: 'D', position: { x: 250, y: 300 }, data: { label: 'D' }, ...nodeDefaults },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'A-B',
+    source: 'A',
+    target: 'B',
+  },
+  {
+    id: 'A-C',
+    source: 'A',
+    target: 'C',
+  },
+  {
+    id: 'A-D',
+    source: 'A',
+    target: 'D',
+  },
+];
+
+const ColorModeFlow = () => {
+  const [colorMode, setColorMode] = useState<ColorMode>('light');
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect: OnConnect = useCallback(
+    (params) => {
+      console.log('on connect', params);
+      setEdges((eds) => addEdge(params, eds));
+    },
+    [setEdges]
+  );
+
+  const onChange: ChangeEventHandler<HTMLSelectElement> = (evt) => setColorMode(evt.target.value as ColorMode);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      colorMode={colorMode}
+      fitView
+    >
+      <MiniMap />
+      <Background />
+      <Controls />
+
+      <Panel position="top-right">
+        <select onChange={onChange} data-testid="colormode-select">
+          <option value="light">light</option>
+          <option value="dark">dark</option>
+          <option value="system">system</option>
+        </select>
+      </Panel>
+    </ReactFlow>
+  );
+};
+
+export default ColorModeFlow;

examples/react/src/examples/EasyConnect/index.tsx

@@ -5,7 +5,6 @@ import CustomNode from './CustomNode';
 import FloatingEdge from './FloatingEdge';
 import CustomConnectionLine from './CustomConnectionLine';
 
-import '@xyflow/react/dist/style.css';
 import './style.css';
 
 const initialNodes: Node[] = [

examples/react/src/examples/NodeResizer/index.tsx

@@ -16,8 +16,6 @@ import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
 
-import '@xyflow/react/dist/style.css';
-
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,

examples/react/src/examples/Overview/index.tsx

@@ -23,7 +23,7 @@ const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) => consol
 const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
 const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
 const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
+const onPaneContextMenu = (event: ReactMouseEvent | MouseEvent) => console.log('pane context menu', event);
 const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
 const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
 const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
@@ -230,9 +230,9 @@ const OverviewFlow = () => {
       onEdgesDelete={onEdgesDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
-      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
+      <MiniMap nodeBorderRadius={2} />
       <Controls />
-      <Background color="#aaa" gap={25} />
+      <Background gap={25} />
     </ReactFlow>
   );
 };

examples/react/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './App';
+import App from './App/index';
 
 import '@xyflow/react/dist/style.css';
 import './index.css';