Themes & Customization

all4one comes with several built-in themes that can be applied instantly via the nodeTheme prop.

Built-in Themes

Default

The default theme is clean and professional, using a white background with subtle borders.

Modern

The modern theme uses vibrant colors and deeper shadows to make the chart pop.

Glass (Glassmorphism)

The glass theme applies a frosted glass effect. Best used with a colorful or gradient background.

<All4One 
  nodeTheme="glass" 
  backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)" 
/>

Neon

A high-energy dark theme with glowing cyan borders. The background is automatically set to black if not specified.

Corporate

Designed for high-density information display, using professional blues and grays.

Edge Customization

You can customize the connections between nodes using the edgeType, edgeColor, and edgeAnimated props.

<All4One 
  edgeType="curved-edge"
  edgeColor="#2563eb"
  edgeAnimated={true}
/>

Backgrounds

Control the canvas background with backgroundVariant and backgroundColor.

• dots: Subtle grid of dots.
• lines: Traditional grid lines.
• cross: Small crosshairs at grid intersections.