Theming and Customization

ApexTree ships with built-in light and dark themes and exposes every color, border, shadow, and font as an option. For full control, the 'custom' theme hands styling over to your own CSS variables.

Built-in themes

The theme option selects a preset:

Value	Description
'light' (default)	Soft-neutral palette suitable for most pages
'dark'	Dark palette with slate backgrounds and muted edges
'custom'	Disables built-in CSS variable injection so host-page variables win

const tree = new ApexTree(document.getElementById('chart'), {
  theme: 'dark',
})
tree.render(data)

Node colors and borders

Option	Type	Default	Description
nodeBGColor	string	'#FFFFFF'	Node background
nodeBGColorHover	string	'#FFFFFF'	Node background on hover
borderColor	string	'#BCBCBC'	Border color
borderColorHover	string	'#5C6BC0'	Border color on hover
borderWidth	number	1	Border width in pixels
borderStyle	string	'solid'	CSS border-style
borderRadius	string	'5px'	CSS border-radius

const tree = new ApexTree(el, {
  nodeBGColor: '#F8FAFC',
  nodeBGColorHover: '#EEF2FF',
  borderColor: '#CBD5E1',
  borderColorHover: '#6366F1',
  borderRadius: '10px',
  borderWidth: 1,
})

Shadows and hover lift

Option	Type	Description
nodeShadow	string	CSS box-shadow in the default state; empty string disables it
nodeShadowHover	string	box-shadow on hover (paired with a subtle lift)

const tree = new ApexTree(el, {
  nodeShadow: '0 1px 3px rgba(16,24,40,0.1)',
  nodeShadowHover: '0 4px 8px rgba(16,24,40,0.15)',
})

highlightOnHover (on by default) highlights the hovered node and its connecting edges. Set it to false to disable hover emphasis entirely.

Fonts

Option	Type	Default	Description
fontColor	string	'#000000'	Node text color
fontFamily	string	''	Font family; empty falls back to the page default
fontSize	string	'14px'	Font size
fontWeight	string	'400'	Font weight

const tree = new ApexTree(el, {
  fontColor: '#0F172A',
  fontFamily: 'Inter, sans-serif',
  fontSize: '14px',
  fontWeight: '500',
})

Edge colors

Edge appearance is covered in Directions and Layouts. In short: edgeColor, edgeColorHover, edgeWidth, and edgeColorMode: 'node' (to match edges to their child node's border color).

Custom theme with CSS variables

Set theme: 'custom' to stop ApexTree from injecting its own CSS variables, then define your own on the container (or a parent). This is the cleanest way to integrate with a design system or dark-mode toggle driven by your app:

const tree = new ApexTree(el, {
  theme: 'custom',
})
tree.render(data)

/* your stylesheet — variables win because 'custom' suppresses injection */
.root {
  --apextree-node-bg: #1e293b;
  --apextree-node-border: #334155;
  --apextree-edge: #475569;
  --apextree-font-color: #e2e8f0;
}

Container styling with canvasStyle

canvasStyle injects arbitrary CSS onto the SVG root container — useful for a border, background, or rounded corners around the whole chart:

const tree = new ApexTree(el, {
  canvasStyle: 'border: 1px solid #E2E8F0; border-radius: 12px; background: #fff;',
})

Per-node theming

Any node can override its colors, borders, and fonts via NestedNode.options — useful for categorizing roles or highlighting a specific node. See Data Format:

const data = {
  id: 'ceo',
  name: 'Alice',
  options: { nodeBGColor: '#EEF2FF', borderColor: '#6366F1', fontWeight: '700' },
  children: [],
}

Complete dark-theme example

const tree = new ApexTree(document.getElementById('chart'), {
  theme: 'dark',
  nodeWidth: 160,
  nodeHeight: 56,
  borderRadius: '10px',
  fontColor: '#E2E8F0',
  fontFamily: 'Inter, sans-serif',
  edgeColorMode: 'node',
  canvasStyle: 'border-radius: 12px; background: #0F172A;',
})
tree.render(data)

React example

import { ApexTreeChart } from 'react-apextree'

const options = {
  theme: 'dark' as const,
  nodeWidth: 160,
  nodeHeight: 56,
  borderRadius: '10px',
  fontColor: '#E2E8F0',
  edgeColorMode: 'node' as const,
}

export default function ThemedTree() {
  return <ApexTreeChart data={data} options={options} />
}