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 four built-in themes:

  • Willow
  • WillowDark
  • Material

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;
    }

Material theme settings:

:global(.wx-material-theme) {
        --wx-gantt-border: var(--wx-border);
        --wx-gantt-form-header-border: var(--wx-border);
        --wx-gantt-icon-color: var(--wx-icon-color);

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

        --wx-gantt-task-color: #448aff;
        --wx-gantt-task-font-color: #fff;
        --wx-gantt-task-fill-color: #246cd9;
        --wx-gantt-task-border-color: #448aff;
        --wx-gantt-task-border: 1px solid #246cd9;

        --wx-gantt-project-color: #1de9b6;
        --wx-gantt-project-font-color: #5f5f5f;
        --wx-gantt-project-fill-color: #00d19a;
        --wx-gantt-project-border-color: #1de9b6;
        --wx-gantt-project-border: 1px solid #00d19a;

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

        --wx-gantt-select-color: rgb(201, 244, 240);
        --wx-gantt-link-color: #87a4bc;
        --wx-gantt-link-marker-background: #f0f0f0;
        --wx-gantt-link-marker-color: #87a4bc;

        --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: 22px;
        --wx-gantt-progress-border-color: #dfdfdf;

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

        /* grid */
        --wx-grid-header-font: 500 14px Roboto;
        --wx-grid-header-font-color: #a6a6a6;
        --wx-grid-header-text-transform: uppercase;
        --wx-grid-header-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1),
            0px 1px 2px rgba(0, 0, 0, 0.1);

        --wx-grid-body-font: 400 14px Roboto;
        --wx-grid-body-font-color: #5f5f5f;
        --wx-grid-body-row-border: 1px solid transparent;
        --wx-grid-body-cell-border: 1px solid transparent;

        /* timescale */
        --wx-timescale-font: 500 12px Roboto;
        --wx-timescale-font-color: #a6a6a6;
        --wx-timescale-text-transform: uppercase;
        --wx-timescale-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1),
            0px 1px 2px rgba(0, 0, 0, 0.1);
        --wx-timescale-border: 1px solid transparent;

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

        /* markers */
        --wx-gantt-marker-font: 500 12px Roboto;
        --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: rgba(0, 0, 0, 0.7);

        /* sidebar */
        --wx-sidebar-close-icon: var(--wx-color-secondary-font);
    }

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 { Material } from "src/themes/Material.svelte";
  
  const data = getData(); 

</script>

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

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

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