ApexSankey - CSS Custom Property Theming

🎨 Live Theme Toggle

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

🌑 Dark Mode via `prefers-color-scheme` (no JS)

This chart is themed entirely via a CSS @media (prefers-color-scheme: dark) block — no JavaScript required. Switch your OS appearance to dark mode to see it update automatically.

📋 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.

/* Light mode tokens on the container */ #my-sankey { --apex-sankey-edge-opacity: 0.5;
          --apex-sankey-edge-gradient: true; --apex-sankey-label-color: #2d3748; --apex-sankey-label-font-size: 12px;
          --apex-sankey-font-family: system-ui, sans-serif; --apex-sankey-node-width: 16;
          --apex-sankey-node-border-color: transparent; --apex-sankey-node-border-width: 0; /* tooltipTheme sets the
          tooltip bg + border + text color together */ --apex-sankey-tooltip-theme: light; } /* Dark mode — via OS
          preference (no JS required). One token flips the whole tooltip to a readable dark preset. */ @media
          (prefers-color-scheme: dark) { #my-sankey { --apex-sankey-edge-opacity: 0.4; --apex-sankey-label-color:
          #c9d1d9; --apex-sankey-tooltip-theme: dark; } } /* Dark mode — via a manual [data-theme] toggle */
          [data-theme="dark"] #my-sankey { --apex-sankey-edge-opacity: 0.4; --apex-sankey-label-color: #c9d1d9;
          --apex-sankey-tooltip-theme: dark; }

📖 Token Reference

All supported CSS custom properties for ApexSankey.

--apex-sankey-edge-opacity

Flow edge opacity (0-1, default 0.4)

--apex-sankey-edge-gradient

Edge gradient fill ('true'/'false', default true)

--apex-sankey-label-color

Node label text color

--apex-sankey-label-font-size

Node label font size (e.g. 12px)

--apex-sankey-font-family

Font family for all labels

--apex-sankey-node-width

Node rectangle width in px (default 20)

--apex-sankey-node-border-color

Node border color (default: node color)

--apex-sankey-node-border-width

Node border width in px (default 1)

--apex-sankey-tooltip-bg

Tooltip background color (default #FFFFFF)

--apex-sankey-tooltip-border-color

Tooltip border color (default #BCBCBC)

--apex-sankey-tooltip-font-color

Tooltip text color (default #1a1a1a)

--apex-sankey-tooltip-theme

'light' | 'dark' — shortcut that sets tooltip bg + border + text together

🎨 Live Theme Toggle

🌑 Dark Mode via prefers-color-scheme (no JS)

📋 How it works

📖 Token Reference

🌑 Dark Mode via `prefers-color-scheme` (no JS)