Themes

Themes

Light and dark themes with full customization of node, edge, arrow, ring, cluster, lasso, and canvas colors.

Import

import { lightTheme, darkTheme, GraphCanvas } from 'reagraph';

Theme Interface

interface Theme {
  canvas?: {
    background?: ColorRepresentation;
    fog?: ColorRepresentation | null;
  };
  node: {
    fill: ColorRepresentation;
    activeFill: ColorRepresentation;
    opacity: number;
    selectedOpacity: number;
    inactiveOpacity: number;
    label: {
      color: ColorRepresentation;
      stroke?: ColorRepresentation;
      activeColor: ColorRepresentation;
      backgroundColor?: ColorRepresentation;
      backgroundOpacity?: number;
      padding?: number;
      strokeColor?: ColorRepresentation;
      strokeWidth?: number;
      radius?: number;
    };
    subLabel?: {
      color: ColorRepresentation;
      stroke?: ColorRepresentation;
      activeColor: ColorRepresentation;
    };
  };
  ring: {
    fill: ColorRepresentation;
    activeFill: ColorRepresentation;
  };
  edge: {
    fill: ColorRepresentation;
    activeFill: ColorRepresentation;
    opacity: number;
    selectedOpacity: number;
    inactiveOpacity: number;
    label: {
      color: ColorRepresentation;
      stroke?: ColorRepresentation;
      activeColor: ColorRepresentation;
      fontSize?: number;
    };
    subLabel?: {
      color: ColorRepresentation;
      stroke?: ColorRepresentation;
      activeColor: ColorRepresentation;
      fontSize?: number;
    };
  };
  arrow: {
    fill: ColorRepresentation;
    activeFill: ColorRepresentation;
  };
  lasso: {
    background: string;
    border: string;
  };
  cluster?: {
    stroke?: ColorRepresentation;
    fill?: ColorRepresentation;
    opacity?: number;
    selectedOpacity?: number;
    inactiveOpacity?: number;
    label?: {
      stroke?: ColorRepresentation;
      color: ColorRepresentation;
      fontSize?: number;
      offset?: [number, number, number];
    };
  };
}

Light Theme Defaults

Dark Theme Defaults

Usage

Light Theme (Default)

<GraphCanvas nodes={nodes} edges={edges} />

Dark Theme

import { darkTheme } from 'reagraph';

<GraphCanvas nodes={nodes} edges={edges} theme={darkTheme} />

Custom Theme

import { lightTheme } from 'reagraph';

const customTheme = {
  ...lightTheme,
  canvas: { background: '#f5f5f5' },
  node: {
    ...lightTheme.node,
    fill: '#4CAF50',
    activeFill: '#FF5722',
  },
  edge: {
    ...lightTheme.edge,
    fill: '#999',
    activeFill: '#FF5722',
  },
};

<GraphCanvas nodes={nodes} edges={edges} theme={customTheme} />

Label Background

const themed = {
  ...lightTheme,
  node: {
    ...lightTheme.node,
    label: {
      ...lightTheme.node.label,
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      padding: 2,
      radius: 0.2,
      strokeColor: '#ddd',
      strokeWidth: 0.5,
    },
  },
};

Per-Node Color Override

Theme colors can be overridden per node/edge via the fill property in data:

const nodes = [
  { id: '1', label: 'Default Color' },
  { id: '2', label: 'Red', fill: '#FF5722' },
  { id: '3', label: 'Blue', fill: '#2196F3' },
];

Notes

• activeFill is used when a node/edge is hovered or selected
• inactiveOpacity dims non-selected elements when a selection exists
• selectedOpacity is applied to selected elements
• lasso.background and lasso.border are CSS values (strings with units)
• Spread the base theme and override only what you need