# Dark CSS Theme (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo

> A dark [CSS theme](https://api.daypilot.org/daypilot-gantt-theme/) with rounded tasks. You can [customize the Dark Theme](https://themes.daypilot.org/gantt/create#x5p2bo) in [DayPilot Theme Designer](https://themes.daypilot.org/).

## Links

- Canonical HTML: /demo/gantt/themedark.html
- Source HTML folder: /demo/gantt/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Gantt("dp", {
            theme: "gantt_dark",
            startDate: "2026-10-12",
            days: 14,
            cellWidthSpec: "Auto",
            cellWidthMin: 40,
            rowHeaderWidth: 190,
            taskHeight: 36,
            rowMinHeight: 52,
            rowMarginBottom: 10,
            heightSpec: "Auto",
            taskGroupMode: "Auto",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Day", format: "ddd d"}
            ],
            taskDoubleClickHandling: "Enabled",
            onTaskDoubleClick: (args) => app.editTask(args.task),
            onBeforeTaskRender: (args) => {
                args.data.box.cssClass = `dark-tone-${args.data.tags?.tone || 0}`;
                if (args.type === "Task") {
                    args.data.box.html = `${args.data.complete || 0}%`;
                    args.data.box.areas = [
                        {
                            right: 4,
                            top: "calc(50% - 10px)",
                            width: 18,
                            height: 20,
                            padding: 1,
                            symbol: "../icons/daypilot.svg#threedots-v",
                            fontColor: "#f0f5f8",
                            cssClass: "dark-action",
                            toolTip: "Edit, recolor or delete",
                            action: "None",
                            onClick: () => dp.contextMenuTask.show(dp.tasks.find(args.data.id))
                        }
                    ];
                }
                if (args.type === "Group") {
                    args.data.box.htmlRight = "";
                }
            }
        });
        dp.init();

        const app = {
            init() {
                dp.contextMenuTask = this.createTaskMenu();
                this.addEventHandlers();
                this.loadData();
            },
            addEventHandlers() {
                document.getElementById("add-task").addEventListener("click", async () => {
                    const form = [
                        {name: "Name", id: "text"},
                        {name: "Start", id: "start", type: "date"},
                        {name: "End", id: "end", type: "date"}
                    ];
                    const modal = await DayPilot.Modal.form(form, {text: "New task", start: "2026-10-14", end: "2026-10-17"});
                    if (modal.canceled) {
                        return;
                    }
                    dp.tasks.add({...modal.result, id: DayPilot.guid(), complete: 0});
                });
            },
            loadData() {
                dp.update({
                    tasks: [
                        {
                            id: "website",
                            text: "Website",
                            children: [
                                {id: 1, text: "Discovery", start: "2026-10-12", end: "2026-10-15", complete: 100},
                                {id: 2, text: "Design", start: "2026-10-15", end: "2026-10-18", complete: 65, tags: {tone: 1}},
                                {id: 3, text: "Build", start: "2026-10-16", end: "2026-10-20", complete: 30, tags: {tone: 3}},
                                {id: 4, text: "Review", start: "2026-10-19", end: "2026-10-22", complete: 0, tags: {tone: 2}},
                                {id: 5, text: "Launch", start: "2026-10-22", type: "Milestone", tags: {tone: 1}}
                            ]
                        },
                        {
                            id: "delivery",
                            text: "Delivery",
                            children: [
                                {
                                    id: 6,
                                    text: "Release notes",
                                    start: "2026-10-14",
                                    end: "2026-10-18",
                                    complete: 40,
                                    tags: {tone: 3}
                                },
                                {
                                    id: 7,
                                    text: "Team handoff",
                                    start: "2026-10-19",
                                    end: "2026-10-22",
                                    complete: 0,
                                    tags: {tone: 0}
                                }
                            ]
                        }
                    ],
                    links: [
                        {from: 1, to: 2, type: "FinishToStart"},
                        {from: 2, to: 3, type: "StartToStart"},
                        {from: 3, to: 4, type: "FinishToStart"},
                        {from: 4, to: 5, type: "FinishToStart"}
                    ]
                });
            },
            async editTask(task) {
                const modal = await DayPilot.Modal.prompt("Task name:", task.data.text);
                if (modal.canceled) {
                    return;
                }
                task.data.text = modal.result;
                dp.tasks.update(task);
            },
            createTaskMenu() {
                const colors = ["Blue", "Sage", "Sand", "Lavender"].map((name, tone) => ({
                    text: `Color: ${name}`,
                    onClick: (args) => {
                        args.source.data.tags = {...args.source.data.tags, tone};
                        dp.tasks.update(args.source);
                    }
                }));
                return new DayPilot.Menu({
                    theme: "dark-menu",
                    onShow: (args) => {
                        const task = args.source.data;
                        const canRecolor = !task.children?.length && task.type !== "Milestone";
                        colors.forEach((item) => {
                            item.hidden = !canRecolor;
                        });
                    },
                    items: [
                        {text: "Edit name…", onClick: (args) => app.editTask(args.source)},
                        ...colors,
                        {text: "-"},
                        {text: "Delete", onClick: (args) => dp.tasks.remove(args.source)}
                    ]
                });
            }
        };

        app.init();
```