🎨 Live Theme Toggle
Use the toggle in the header to switch between light and dark mode. The Gantt chart responds to CSS custom properties defined on its container element — no JavaScript options are changed.
📋 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-gantt { --apex-gantt-bar-fill: #87B7FE;
--apex-gantt-row-bg-even: #ffffff; --apex-gantt-row-bg-odd: #f5f9ff; --apex-gantt-header-bg: #ebf3fb;
--apex-gantt-grid-line: #e3edf8; --apex-gantt-dependency-line: #1a6fc4; --apex-gantt-font-family: system-ui,
sans-serif; --apex-gantt-font-size: 13px; --apex-gantt-font-color: #2d3748; } /* Dark mode — via OS preference
(no JS required) */ @media (prefers-color-scheme: dark) { #my-gantt { --apex-gantt-bar-fill: #818cf8;
--apex-gantt-background-color: #1e1e1e; --apex-gantt-row-bg-even: #1e1e1e; --apex-gantt-row-bg-odd: #252525;
--apex-gantt-header-bg: #2a2a2a; --apex-gantt-grid-line: #3a3a3a; --apex-gantt-dependency-line: #a5b4fc;
--apex-gantt-font-color: #e0e0e0; } } /* Dark mode — via a manual [data-theme] toggle */ [data-theme="dark"]
#my-gantt { --apex-gantt-bar-fill: #818cf8; --apex-gantt-background-color: #1e1e1e; --apex-gantt-row-bg-even:
#1e1e1e; --apex-gantt-row-bg-odd: #252525; --apex-gantt-dependency-line: #a5b4fc; --apex-gantt-font-color:
#e0e0e0; }
📖 Token Reference
All supported CSS custom properties for ApexGantt.
--apex-gantt-bar-fill
Task bar fill color
--apex-gantt-background-color
Toolbar / container background
--apex-gantt-row-bg-even
Even row background
--apex-gantt-row-bg-odd
Odd row background
--apex-gantt-header-bg
Timeline / header background
--apex-gantt-grid-line
Cell border / grid line color
--apex-gantt-dependency-line
Dependency arrow color
--apex-gantt-font-family
Font family for all labels
--apex-gantt-font-size
Font size for labels (e.g. 13px)
--apex-gantt-font-color
Text color for all labels