Skip to main content

Styling

You can customize styles of the Gantt interface to meet your project requirements. The library provides a wide range of css variables with the next built-in themes:

  • Willow
  • WillowDark

Theme settings​

Willow theme settings:

:global(.wx-willow-theme) {
        --wx-gantt-border: 1px solid #1d1e261a;
        --wx-gantt-form-header-border: none;
        --wx-gantt-icon-color: #9fa1ae;

        /* bars */
        --wx-gantt-bar-font: var(--wx-font-weight) var(--wx-font-size)
            var(--wx-font-family);
        --wx-gantt-bar-border-radius: 3px;
        --wx-gantt-milestone-border-radius: 3px;

        --wx-gantt-task-color: #3983eb;
        --wx-gantt-task-font-color: #fff;
        --wx-gantt-task-fill-color: #1f6bd9;
        --wx-gantt-task-border-color: #1f6bd9;
        --wx-gantt-task-border: 1px solid transparent;

        --wx-gantt-project-color: #00ba94;
        --wx-gantt-project-font-color: #ffffff;
        --wx-gantt-project-fill-color: #099f81;
        --wx-gantt-project-border-color: #099f81;
        --wx-gantt-project-border: 1px solid transparent;

        --wx-gantt-milestone-color: #ad44ab;

        --wx-gantt-select-color: #eaedf5;
        --wx-gantt-link-color: #9fa1ae;
        --wx-gantt-link-marker-background: #eaedf5;
        --wx-gantt-link-marker-color: #9fa1ae;

        --wx-gantt-bar-shadow: 0px 1px 2px rgba(44, 47, 60, 0.06),
            0px 3px 10px rgba(44, 47, 60, 0.12);

        --wx-gantt-progress-marker-height: 26px;
        --wx-gantt-progress-border-color: #c0c3ce;

        --wx-gantt-baseline-border-radius: 2px;

        /* grid */
        --wx-grid-header-font: var(--wx-font-weight-md) var(--wx-font-size)
            var(--wx-font-family);
        --wx-grid-header-font-color: var(--wx-color-font);
        --wx-grid-header-text-transform: capitalize;
        --wx-grid-header-shadow: none;

        --wx-grid-body-font: var(--wx-font-weight) var(--wx-font-size)
            var(--wx-font-family);
        --wx-grid-body-font-color: var(--wx-color-font);
        --wx-grid-body-row-border: var(--wx-gantt-border);
        --wx-grid-body-cell-border: 1px solid transparent;

        /* timescale */
        --wx-timescale-font: var(--wx-font-weight-md) var(--wx-font-size-sm)
            var(--wx-font-family);
        --wx-timescale-font-color: var(--wx-color-font);
        --wx-timescale-text-transform: uppercase;
        --wx-timescale-shadow: none;
        --wx-timescale-border: var(--wx-gantt-border);

        /* grid and timescale */
        --wx-gantt-holiday-background: #f0f6fa;
        --wx-gantt-holiday-color: #9fa1ae;

        /* markers */
        --wx-gantt-marker-font: var(--wx-font-weight-md) var(--wx-font-size-sm)
            var(--wx-font-family);
        --wx-gantt-marker-font-color: #fff;
        --wx-gantt-marker-color: rgba(6, 189, 248, 0.77);

        /* tooltips */
        --wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size)
            var(--wx-font-family);
        --wx-tooltip-font-color: #e6e6e6;
        --wx-tooltip-background: #4f525a;

        /* sidebar */
        --wx-sidebar-close-icon: #c0c3ce;
}

WillowDark theme settings:

:global(.wx-willow-dark-theme) {
        color-scheme: dark;

        --wx-gantt-border: var(--wx-border);
        --wx-gantt-form-header-border: none;
        --wx-gantt-icon-color: #9fa1ae;

        /* bars */
        --wx-gantt-bar-font: var(--wx-font-weight) var(--wx-font-size)
            var(--wx-font-family);
        --wx-gantt-bar-border-radius: 3px;
        --wx-gantt-milestone-border-radius: 3px;

        --wx-gantt-task-color: #37a9ef;
        --wx-gantt-task-font-color: #ffffffe5;
        --wx-gantt-task-fill-color: #098cdc;
        --wx-gantt-task-border-color: #098cdc;
        --wx-gantt-task-border: 1px solid transparent;

        --wx-gantt-project-color: #00ba94;
        --wx-gantt-project-font-color: #ffffffe5;
        --wx-gantt-project-fill-color: #099f81;
        --wx-gantt-project-border-color: #099f81;
        --wx-gantt-project-border: 1px solid transparent;

        --wx-gantt-progress-marker-height: 26px;
        --wx-gantt-progress-border-color: #4b5359;

        --wx-gantt-baseline-border-radius: 2px;

        /* temp*/
        --wx-gantt-bar-shadow: 0px 1px 2px rgba(44, 47, 60, 0.06),
            0px 3px 10px rgba(44, 47, 60, 0.12);

        --wx-gantt-milestone-color: #ad44ab;

        --wx-gantt-select-color: #384047;
        --wx-gantt-link-color: #9fa1ae;
        --wx-gantt-link-marker-background: #384047;
        --wx-gantt-link-marker-color: #9fa1ae;

        /* grid */
        --wx-grid-header-font: var(--wx-font-weight-md) var(--wx-font-size)
            var(--wx-font-family);
        --wx-grid-header-font-color: var(--wx-color-font);
        --wx-grid-header-text-transform: capitalize;
        --wx-grid-header-shadow: none;

        --wx-grid-body-font: var(--wx-font-weight) var(--wx-font-size)
            var(--wx-font-family);
        --wx-grid-body-font-color: var(--wx-color-font);
        --wx-grid-body-row-border: var(--wx-border);
        --wx-grid-body-cell-border: 1px solid transparent;

        /* timescale */
        --wx-timescale-font: var(--wx-font-weight-md) var(--wx-font-size-sm)
            var(--wx-font-family);
        --wx-timescale-font-color: var(--wx-color-font);
        --wx-timescale-text-transform: uppercase;
        --wx-timescale-shadow: none;
        --wx-timescale-border: var(--wx-border);

        /* grid and timescale */
        --wx-gantt-holiday-background: #303539;
        --wx-gantt-holiday-color: #878994;

        /* markers */
        --wx-gantt-marker-font: var(--wx-font-weight-md) var(--wx-font-size-sm)
            var(--wx-font-family);
        --wx-gantt-marker-font-color: #fff;
        --wx-gantt-marker-color: rgba(6, 189, 248, 0.77);

        /* tooltips */
        --wx-tooltip-font: var(--wx-font-weight) var(--wx-font-size)
            var(--wx-font-family);
        --wx-tooltip-font-color: #e6e6e6;
        --wx-tooltip-background: #4f525a;

        /* sidebar */
        --wx-sidebar-close-icon: #384047;
    }

Applying a theme​

Apply the desired theme by importing the theme and wrapping Gantt into the required theme tag:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  import { Willow } from "wx-svelte-gantt";
  
  const data = getData(); 

</script>

<Willow>
  <Gantt
    tasks={data.tasks}
    //other settings />
</Willow>

If you need to apply different themes to multiple charts, wrap each Gantt tag into the required theme tag. 

<script>
  import { getData, simpleColumns } from "./common/data";
  import { Gantt, Willow, WillowDark } from "wx-svelte-gantt";
  
  const data = getData();

</script>

<Willow>
<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  columns={simpleColumns}
  start={new Date(2021, 2, 1)}
  end={new Date(2021, 3, 1)} />
</Willow>

<WillowDark>
 <Gantt
   tasks={data.newtasks}
   links={data.newlinks}
   scales={data.newscales}
   columns={data.columns}
   start={new Date(2023, 2, 1)}
   end={new Date(2023, 3, 1)} />
</WillowDark>

Customizing theme settings​

To change the themes settings, create a CSS class by changing values of the required CSS variables and apply it to Gantt.

<script>
    import { getData } from "../data";
    import { Gantt } from "wx-svelte-gantt";

    const data = getData();
</script>

<div class="demo" style="padding: 20px;">
    <div>
        <Gantt 
        tasks={data.tasks}
        links={data.links}
        scales={data.scales} />
    </div>
 </div>

<style>
    .demo {
        --wx-gantt-border: 1px solid #a8ae69;
        --wx-gantt-form-header-border: solid;
        --wx-gantt-icon-color: #9d95bc;

        --wx-gantt-task-color: #9d95bc;
    }
</style>
info

You can also style cells of the timescale: Styling cells