Theme

By default, the graph supports 2 themes: light and dark mode. You can also define your own theme using the theme interface.


export type ThemeColor = number | string;
 
export interface Theme {
  canvas: {
    background: ThemeColor;
    fog: ThemeColor;
  };
  node: {
    fill: ThemeColor;
    activeFill: ThemeColor;
    opacity: number;
    selectedOpacity: number;
    inactiveOpacity: number;
    label: {
      color: ThemeColor;
      stroke: ThemeColor;
      activeColor: ThemeColor;
    };
    subLabel?: {
      color: ColorRepresentation;
      stroke?: ColorRepresentation;
      activeColor: ColorRepresentation;
    };
  };
  ring: {
    fill: ThemeColor;
    activeFill: ThemeColor;
  };
  edge: {
    fill: ThemeColor;
    activeFill: ThemeColor;
    opacity: number;
    selectedOpacity: number;
    inactiveOpacity: number;
    label: {
      color: ThemeColor;
      stroke: ThemeColor;
      activeColor: ThemeColor;
      fontSize: number;
    }
  };
  arrow: {
    fill: ThemeColor;
    activeFill: ThemeColor;
  };
  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];
    };
  };
}

which you can pass to the GraphCanvas component like:


<GraphCanvas
  theme={myTheme}
/>

you can extend the existing themes by importing them and then overriding them like:


import { GraphCanvas, lightTheme } from 'reagraph';
 
const myTheme = {
  ...lightTheme,
  node: {
    ...lightTheme.node,
    color: '#000'
  }
};
 
const App = () => (
  <GraphCanvas
    theme={myTheme}
  />
);

An example theme ( the light theme in this case ) ends up looking like this:


import { Theme } from 'reagraph';
 
export const lightTheme: Theme = {
  canvas: {
    background: '#fff',
    fog: '#fff'
  },
  node: {
    fill: '#7CA0AB',
    activeFill: '#1DE9AC',
    opacity: 1,
    selectedOpacity: 1,
    inactiveOpacity: 0.2,
    label: {
      color: '#2A6475',
      stroke: '#fff',
      activeColor: '#1DE9AC'
    },
    subLabel: {
      color: '#2A6475',
      stroke: '#eee',
      activeColor: '#1DE9AC'
    }
  },
  lasso: {
    border: '1px solid #55aaff',
    background: 'rgba(75, 160, 255, 0.1)'
  },
  ring: {
    fill: '#D8E6EA',
    activeFill: '#1DE9AC'
  },
  edge: {
    fill: '#D8E6EA',
    activeFill: '#1DE9AC',
    opacity: 1,
    selectedOpacity: 1,
    inactiveOpacity: 0.1,
    label: {
      stroke: '#fff',
      color: '#2A6475',
      activeColor: '#1DE9AC'
    }
  },
  arrow: {
    fill: '#D8E6EA',
    activeFill: '#1DE9AC'
  },
  cluster: {
    stroke: '#D8E6EA',
    opacity: 1,
    selectedOpacity: 1,
    inactiveOpacity: 0.1,
    label: {
      stroke: '#fff',
      color: '#2A6475'
    }
  }
};

Note that opacity fields are numbers between 0 and 1.