ApexTree - CSS Custom Property Theming

Live Theme Toggle

Use the toggle in the header to switch between light and dark mode. The chart responds to CSS custom properties defined on its container — no JavaScript options are changed.

Light vs Dark — CSS-only theming

Both charts below use identical JavaScript options. The only difference is the CSS custom properties set on each container.

Light (CSS vars)

Dark (CSS vars)

How it works

Set CSS custom properties on the container element (or any ancestor) to override the default JS option values. The chart reads these at render time via getComputedStyle().

/* 1. Set CSS vars on the container — no JS changes needed */ #my-chart { --apex-tree-node-bg: #1e2433;
          --apex-tree-node-border: #3d4f6e; --apex-tree-font-color: #c9d1d9; } /* 2. Or use a media query for automatic
          OS-level dark mode */ @media (prefers-color-scheme: dark) { #my-chart { --apex-tree-node-bg: #1e2433;
          --apex-tree-font-color: #c9d1d9; } } /* 3. Or use a data attribute for a manual toggle */ [data-theme="dark"]
          #my-chart { --apex-tree-node-bg: #1e2433; --apex-tree-font-color: #c9d1d9; }

Token Reference

All supported CSS custom properties for ApexTree.

--apex-tree-node-bg

Node background

--apex-tree-node-bg-hover

Node background on hover

--apex-tree-node-border

Node border color

--apex-tree-node-border-hover

Node border on hover

--apex-tree-node-border-radius

Node corner radius (e.g. 5px)

--apex-tree-edge-stroke

Edge / connector color

--apex-tree-edge-stroke-hover

Edge color on hover

--apex-tree-font-family

Font family for labels

--apex-tree-font-size

Font size for labels (e.g. 14px)

--apex-tree-font-color

Label text color

--apex-tree-expand-btn-bg

Expand/collapse button fill

--apex-tree-expand-btn-border

Expand/collapse button border