CSS Themes

The theme property selects the CSS theme used by the JavaScript Gantt chart. The value must match the CSS class prefix in the theme stylesheet.

Default Theme

The gantt_default theme is built into the library and does not require a separate stylesheet.

Dark Theme

DayPilot Pro for JavaScript includes the gantt_dark theme in demo/themes/gantt_dark.css. The Dark Theme demo shows its dark backgrounds, light text and rounded tasks.

Load the stylesheet and set theme: "gantt_dark" before initializing the chart. This example assumes the DayPilot JavaScript library is already loaded:

<link rel="stylesheet" href="themes/gantt_dark.css">

<div id="dp"></div>

<script>
  const gantt = new DayPilot.Gantt("dp", {
    theme: "gantt_dark",
    // Other Gantt settings...
  });
  gantt.init();
</script>

Angular

Set the theme in a typed configuration object for the Angular component. Copy gantt_dark.css to src/themes and load it from the application's global src/styles.css:

@import "./themes/gantt_dark.css";

The standalone component imports DayPilotModule and binds the configuration in its template:

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-dark-gantt",
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class DarkGanttComponent {
  config: DayPilot.GanttConfig = {
    theme: "gantt_dark",
    startDate: "2026-10-12",
    days: 7,
    tasks: [{id: 1, text: "Design review", start: "2026-10-12", end: "2026-10-15"}]
  };
}

React

Pass the theme and data as individual props to the React component. Place the stylesheet in a themes directory beside this component and import it:

import {DayPilotGantt} from "daypilot-pro-react";
import "./themes/gantt_dark.css";

export default function DarkGantt() {
  return (
    <DayPilotGantt
      theme="gantt_dark"
      startDate="2026-10-12"
      days={7}
      tasks={[{id: 1, text: "Design review", start: "2026-10-12", end: "2026-10-15"}]}
    />
  );
}

Vue

This single-file Vue component imports the stylesheet and passes the theme and data as individual props. Place the theme CSS in the adjacent themes directory. The stylesheet applies globally to the generated DayPilot elements.

<script setup>
import {DayPilotGantt} from "daypilot-pro-vue";
import "./themes/gantt_dark.css";

const tasks = [{id: 1, text: "Design review", start: "2026-10-12", end: "2026-10-15"}];
</script>

<template>
  <DayPilotGantt
    theme="gantt_dark"
    startDate="2026-10-12"
    :days="7"
    :tasks="tasks"
  />
</template>

Theme Designer

You can create a custom theme using the online Gantt Chart Theme Designer.

You can customize the Dark Theme in the Theme Designer. The demo links to this starting palette; adjust its colors, save the theme and download the CSS. Use the downloaded theme's prefix as the theme value.

Theme Structure

See the list of CSS classes used in a Gantt theme.