Skip to main content
SVAR Gantt ships with three built-in themes. Each theme is a Svelte wrapper component that applies a CSS class to its subtree and defines a full set of CSS custom properties.

​
Built-in themes

Material

Clean, elevated look with rounded task bars and Google Material-inspired colours and typography (Roboto).

Willow

Light, flat design with subtle borders and a neutral colour palette.

WillowDark

Dark-mode variant of Willow with inverted backgrounds and adjusted contrast.

​
Applying a theme

Import the theme component and wrap your Gantt (and any companion components) inside it: 
<script>
  import { Gantt, Toolbar, ContextMenu, Editor } from "@svar-ui/svelte-gantt";
  import { Material } from "@svar-ui/svelte-gantt";

  let api = $state();
</script>

<Material>
  <Toolbar {api} />
  <ContextMenu {api}>
    <Gantt bind:this={api} {tasks} {links} />
  </ContextMenu>
  <Editor {api} />
</Material>

​
Fonts prop

Each theme component accepts a fonts boolean prop (defaults to true). When true, the theme loads its font stack automatically. Set it to false if you already load the fonts yourself: 
<Material fonts={false}>
  <Gantt {tasks} {links} />
</Material>

​
CSS custom properties

Every visual detail is controlled by CSS custom properties. Override them inside your own CSS to customise individual aspects without building a new theme.

​
Task bar variables

VariableDescription
--wx-gantt-task-colorTask bar background
--wx-gantt-task-font-colorText colour inside a task bar
--wx-gantt-task-fill-colorProgress fill colour
--wx-gantt-task-border-colorTask bar border
--wx-gantt-task-critical-colorCritical-path task colour
--wx-gantt-summary-colorSummary task bar background
--wx-gantt-milestone-colorMilestone diamond colour
--wx-gantt-bar-border-radiusBar corner radius
--wx-gantt-bar-shadowDrop shadow on bars

​
Grid variables

VariableDescription
--wx-grid-header-fontColumn header font shorthand
--wx-grid-header-font-colorHeader text colour
--wx-grid-header-text-transformuppercase / capitalize
--wx-grid-body-fontRow text font shorthand
--wx-grid-body-font-colorRow text colour
--wx-grid-body-row-borderRow separator border

​
Time scale variables

VariableDescription
--wx-timescale-fontTime scale cell font
--wx-timescale-font-colorTime scale text colour
--wx-timescale-shadowBox shadow under the time scale
--wx-timescale-borderTime scale cell border
--wx-gantt-holiday-backgroundBackground for weekend/holiday cells
--wx-gantt-holiday-colorText colour for weekend/holiday cells

​
Dependency link variables

VariableDescription
--wx-gantt-link-colorLink line colour
--wx-gantt-link-color-hoveredLink colour on hover
--wx-gantt-link-critical-colorCritical-path link colour
--wx-gantt-marker-colorToday / custom marker colour

​
Creating a custom theme

The simplest approach is to wrap your overrides in a CSS class and apply it with a minimal Svelte component that mirrors the built-in theme pattern: 
<!-- themes/MyTheme.svelte -->
<script>
  import { Willow } from "@svar-ui/svelte-gantt";
  let { fonts = true, children } = $props();
</script>

<Willow {fonts}>
  {@render children()}
</Willow>

<style>
  :global(.wx-willow-theme) {
    /* override only what you need */
    --wx-gantt-task-color: #7c3aed;
    --wx-gantt-task-fill-color: #6d28d9;
    --wx-gantt-task-border-color: #6d28d9;
    --wx-gantt-summary-color: #059669;
    --wx-gantt-bar-border-radius: 2px;

    --wx-gantt-holiday-background: #fdf4ff;
  }
</style>
All custom properties must be set on the theme’s root CSS class (e.g. .wx-willow-theme, .wx-material-theme, .wx-willow-dark-theme) so they are properly scoped.

​
Cell borders

The cellBorders prop on <Gantt> controls the grid lines drawn inside the chart area:
ValueEffect
"full"Horizontal and vertical lines on every cell (default)
"column"Vertical lines only — one per time column
<Gantt {tasks} {links} {scales} cellBorders="column" />

​
Highlighting time cells

Pass a highlightTime callback to apply a CSS class to individual day or hour cells. This is how weekends, holidays, and non-working hours are visually distinguished. 
<script>
  import { Gantt } from "@svar-ui/svelte-gantt";

  const scales = [
    { unit: "year",  step: 1, format: "%Y" },
    { unit: "month", step: 2, format: "%F %Y" },
    { unit: "week",  step: 1, format: "Week %W" },
    { unit: "day",   step: 1, format: "%j, %l" },
  ];

  function isDayOff(date) {
    const d = date.getDay();
    return d == 0 || d == 6;
  }

  function isHourOff(date) {
    const h = date.getHours();
    return h < 8 || h == 12 || h > 17;
  }

  function highlightTime(d, u) {
    if (u == "day"  && isDayOff(d))              return "wx-weekend";
    if (u == "hour" && (isDayOff(d) || isHourOff(d))) return "wx-weekend";
    return "";
  }
</script>

<Gantt
  {tasks}
  {links}
  {scales}
  {highlightTime}
  zoom
/>
The callback signature is: 
highlightTime?: (date: Date, unit: "day" | "hour") => string;
Return a CSS class name string (or empty string for no highlight). The built-in themes already style .wx-weekend with the --wx-gantt-holiday-background colour.
You can return any custom CSS class name — not just wx-weekend. Add your own styles to target it:
.my-holiday { background: #fff3cd; }

Build docs developers (and LLMs) love

Get started for freeTalk to us