About dark mode styles

[BHznJNs]

This gantt library is so wonderful and beautiful and I found that it now does not support dark mode. So I spent some time to make this and I hope this can help someone.

Followings are the appearance this dark style should be and the CSS codes:

/* ... Original styles */

.gantt-container {
  /* this is for the container in dark mode */
  background-color: #252525;
}

@media (prefers-color-scheme: dark) {
  .gantt .grid-header {
    fill: #252525;
    stroke: #616161;
  }
  .gantt .grid-row {
    fill: #252525;
  }
  .gantt .grid-row:nth-child(even) {
    fill: #3e3e3e;
  }
  .gantt .row-line {
    stroke: #3e3e3e;
  }
  .gantt .tick {
    stroke: #616161;
  }

  .gantt .today-highlight {
    opacity: 0.2;
  }

  .gantt .arrow {
    stroke: #eee;
  }
  .gantt .bar {
    fill: #616161;
    stroke: none;
  }
  .gantt .bar-progress {
    fill: #8a8aff;
  }
  .gantt .bar-invalid {
    fill: transparent;
    stroke: #c6ccd2;
  }
  .gantt .bar-invalid ~ .bar-label,
  .gantt .bar-label.big {
    fill: #ececec;
  }

  .gantt .bar-wrapper:hover .bar,
  .gantt .bar-wrapper.active .bar {
    fill: #9E9E9E;
  }
  .gantt .bar-wrapper:hover .bar-progress,
  .gantt .bar-wrapper.active .bar-progress {
    fill: #a3a3ff;
  }

  .gantt .upper-text {
    fill: #a2a2a2;
  }
  .gantt .lower-text {
    fill: #f7f7f7;
  }

  .gantt-container .popup-wrapper {
    background-color: #333;
  }
  .gantt-container .popup-wrapper .title {
    border-color: #8a8aff;
  }
  .gantt-container .popup-wrapper .pointer {
    border-top-color: #333;
  }
}

[agostinofiscale]

@BHznJNs thank you for your effort, I just need this today and I found your issue. I suggest you to make a PR. I tested it and it looks very good.

[BHznJNs]

It's glad to see that someone needs this. And thanks for your suggestion, I made this as a PR.

[GursheenK]

Completed via https://github.com/frappe/gantt/pull/377