Theming: Customize Colors, Styles, and Dark Mode

React Flow Theming allows developers to customize the appearance of node-based applications, workflow editors, and interactive diagrams. Using built-in themes, CSS variables, and custom styles, you can create consistent visual experiences that match your application's design system.

Whether you are building a light-themed dashboard, a dark workflow editor, or a fully branded visual application, React Flow provides flexible styling options.

1. Using Built-In React Flow Themes

React Flow supports built-in light and dark themes through the colorMode property. You can switch between themes without manually styling every canvas element.

Code Example

import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        colorMode="dark"
        fitView
      />
    </div>
  );
}

Available themes:

• light: Light background and interface styling.
• dark: Dark background and interface styling.
• system: Automatically follows the user's system preference.

2. Customizing React Flow with CSS Variables

React Flow provides CSS variables that allow developers to customize canvas colors, node backgrounds, edge strokes, selection borders, and other interface elements.

Code Example

.react-flow {
  --xy-node-background-color: #ffffff;
  --xy-node-border: 1px solid #6366f1;
  --xy-node-color: #1e293b;
  --xy-edge-stroke: #6366f1;
  --xy-edge-stroke-width: 2;
  --xy-controls-button-background-color: #ffffff;
  --xy-controls-button-color: #334155;
  --xy-minimap-background-color: #f8fafc;
}

CSS variables make it easier to maintain a consistent design system across your entire workflow editor.

3. Creating a Dark Theme with CSS

You can customize the dark theme further by overriding React Flow's CSS variables. This helps create a modern dark interface for workflow builders and developer tools.

Code Example

.react-flow.dark {
  --xy-node-background-color: #1e293b;
  --xy-node-border: 1px solid #475569;
  --xy-node-color: #f8fafc;
  --xy-edge-stroke: #818cf8;
  --xy-edge-stroke-width: 2;
  --xy-background-color: #0f172a;
  --xy-background-pattern-color: #334155;
}

This creates a consistent dark appearance for nodes, edges, and the canvas background.

4. Switching Themes Dynamically

React Flow allows you to change the canvas theme dynamically using React state. This is useful when building applications with light and dark mode toggles.

Code Example

import { useState } from 'react';
import { ReactFlow } from '@xyflow/react';

export default function App() {
  const [theme, setTheme] = useState('light');

  return (
    <div style={{ width: '100%', height: '500px' }}>
      <button
        onClick={() =>
          setTheme(theme === 'light' ? 'dark' : 'light')
        }
      >
        Switch Theme
      </button>

      <ReactFlow
        nodes={nodes}
        edges={edges}
        colorMode={theme}
        fitView
      />
    </div>
  );
}

Users can switch between light and dark themes without rebuilding the workflow canvas.

5. Styling Custom Nodes

Custom nodes can use CSS classes to match your application's branding. You can customize backgrounds, borders, typography, spacing, shadows, and interactive states.

Code Example

export function StyledNode({ data }) {
  return (
    <div className="styled-node">
      <strong>{data.label}</strong>
      <p>Custom workflow component</p>
    </div>
  );
}

.styled-node {
  padding: 16px;
  min-width: 180px;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Custom node styling helps create visually consistent workflow components that fit your application's design system.

6. Customizing Edge Appearance

React Flow supports CSS-based edge customization, allowing developers to control connection colors, thickness, and visual states.

Code Example

.react-flow__edge-path {
  stroke: #6366f1;
  stroke-width: 2;
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke: #f59e0b;
  stroke-width: 3;
}

You can also customize individual edges using inline styles or edge data for more advanced workflow designs.

7. Customizing Background and Controls

React Flow's Background and Controls components can also be customized to match your application's theme.

Code Example

import {
  ReactFlow,
  Background,
  Controls,
  BackgroundVariant,
} from '@xyflow/react';

export default function App() {
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      colorMode="dark"
      fitView
    >
      <Background
        variant={BackgroundVariant.Dots}
        color="#475569"
        gap={20}
        size={1}
      />

      <Controls />
    </ReactFlow>
  );
}

This creates a dark workflow canvas with a customized dotted background and built-in navigation controls.