Skins Customization

Starting from v9.0 Gantt skins use CSS variables that you can use for customization and styling.

Change skin dynamically

Key CSS Variables:

:root {
    --dhx-gantt-theme: terrace;
    --dhx-gantt-font-family: Inter, Helvetica, Arial, sans-serif;
    --dhx-gantt-font-size: 14px;


    --dhx-gantt-base-colors-white: #FFFFFF;
    --dhx-gantt-base-colors-select: #EFF3FF;
    --dhx-gantt-base-colors-hover-color: #e0e0e0;
    --dhx-gantt-base-colors-border-light: #F0F0F0;
    --dhx-gantt-base-colors-border: #DFE0E1;

    --dhx-gantt-base-colors-icons: #A1A4A6;
    --dhx-gantt-base-colors-disabled: #E9E9E9;
    --dhx-gantt-base-colors-select: #E0E5F3;
    --dhx-gantt-base-colors-text-light: #555D63;
    --dhx-gantt-base-colors-text-base: #23272A;
    --dhx-gantt-base-colors-text-on-fill: rgba(255, 255, 255, 0.90);
    --dhx-gantt-base-colors-background: #FFFFFF;
    --dhx-gantt-base-colors-background-alt: #F2F2F2;

    --dhx-gantt-base-colors-primary: #537CFA;
    --dhx-gantt-base-colors-warning: #FAB936;
    --dhx-gantt-base-colors-error: #E3334E;
    --dhx-gantt-base-colors-success: #1BC297;

    --dhx-gantt-container-background: var(--dhx-gantt-base-colors-background);
    --dhx-gantt-container-color: var(--dhx-gantt-base-colors-text-base);
    --dhx-gantt-offtime-background: var(--dhx-gantt-base-colors-background-alt);

    --dhx-gantt-scale-background: var(--dhx-gantt-container-background);
    --dhx-gantt-scale-border-vertical: 1px solid var(--dhx-gantt-base-colors-border-light);
    --dhx-gantt-scale-border-horizontal: 1px solid var(--dhx-gantt-base-colors-border);

    --dhx-gantt-scale-color: var(--dhx-gantt-base-colors-text-light);

    --dhx-gantt-grid-body-background: transparent;
    --dhx-gantt-grid-scale-background: var(--dhx-gantt-scale-background);
    --dhx-gantt-grid-scale-color: var(--dhx-gantt-scale-color);
    --dhx-gantt-grid-scale-border-vertical: var(--dhx-gantt-scale-border-vertical);
    --dhx-gantt-timeline-scale-background: var(--dhx-gantt-scale-background);
    --dhx-gantt-timeline-scale-color: var(--dhx-gantt-scale-color);
    --dhx-gantt-timeline-scale-border-vertical:  var(--dhx-gantt-scale-border-vertical);

    /* tasks */


    --dhx-gantt-task-blue: linear-gradient(180deg, #527CFF 0%, #9751FC 100%);
    --dhx-gantt-task-green: linear-gradient(180deg, #12D979 0%, #1ECDEB 100%);
    --dhx-gantt-task-violet: linear-gradient(180deg, #D071EF 0%, #EE71D5 100%);
    --dhx-gantt-task-yellow: linear-gradient(180deg, #FFB725 0%, #FFBB25 31.25%, #FAEA27 100%);

    --dhx-gantt-task-background: var(--dhx-gantt-task-blue);
    --dhx-gantt-task-border: none;
    --dhx-gantt-task-color: var(--dhx-gantt-base-colors-text-on-fill);
    --dhx-gantt-project-color: var(--dhx-gantt-task-color);
    --dhx-gantt-task-line-text: var(--dhx-gantt-container-color);

    --dhx-gantt-task-row-border: 1px solid var(--dhx-gantt-base-colors-border);
    --dhx-gantt-task-row-background: var(--dhx-gantt-container-background);
    --dhx-gantt-task-row-background--odd: var(--dhx-gantt-container-background);

    --dhx-gantt-project-background: var(--dhx-gantt-task-green);
    --dhx-gantt-milestone-background: var(--dhx-gantt-task-violet);

    --dhx-gantt-task-marker-color: var(--dhx-gantt-task-background);

    --dhx-gantt-popup-background: var(--dhx-gantt-container-background);
    --dhx-gantt-popup-color: var(--dhx-gantt-container-color);

    --dhx-gantt-tooltip-background: var(--dhx-gantt-base-colors-text-base);
    --dhx-gantt-tooltip-color: var(--dhx-gantt-container-background);

    --dhx-gantt-link-background: var(--dhx-gantt-base-colors-icons);
    --dhx-gantt-link-background-hover: var(--dhx-gantt-base-colors-icons-hover);
    --dhx-gantt-link-critical-background: var(--dhx-gantt-base-colors-error);

}

All variables can be found in the codebase/sources/less/src/themes/variables.less file of the package.

How to customize skins

The easiest method to customize the Gantt's appearance is by overriding the relevant CSS variables in your stylesheet. Here's an example:

<style>
:root {
 /* scales */
  --dhx-gantt-scale-background: #8E8E8E;
  --dhx-gantt-base-colors-border-light: #C5C5C5;
  --dhx-gantt-base-colors-border: #DFE0E1;
  --dhx-gantt-scale-color: #FFF;
  --dhx-gantt-base-colors-icons: #00000099;
  
  /* tasks */
  --dhx-gantt-task-background: #3db9d3;
  --dhx-gantt-task-color: #FFFFFF;
  --dhx-gantt-project-background: #6AA84F;
  --dhx-gantt-project-color: #FFFFFF;

  /* links */
  --dhx-gantt-link-background: #ffa011;
  --dhx-gantt-link-background-hover: #ffa011;

}
</style>

Change skin dynamically

By defining variables in this manner, you can redefine the default styles, ensuring that your custom styles are applied to the Gantt.

note

For correct inheritance of values across the entire theme, define variables at the :root element.

It's important to define these styles at the :root element to ensure proper inheritance and application throughout the component. This approach guarantees that when a variable utilized by other variables is redefined, it correctly influences related styles across the component.

For instance, the variable --dhx-gantt-scale-color inherits from the primary text color variable --dhx-gantt-container-color.

• If you redefine --dhx-gantt-container-color at the :root level, you ensure that --dhx-gantt-scale-color reflects this change.

<style>
:root {
    /* --dhx-gantt-scale-color and other
  variables that inherit `--dhx-gantt-container-color`
  will be affected
  */
  --dhx-gantt-container-color: #222;

}
</style>

• If you redefine --dhx-gantt-container-color at a lower level in the DOM tree, such as within .gantt_container, it won't affect the --dhx-gantt-scale-color variable.

<style>
.gantt_container {
    /* only elements that directly 
  use --dhx-gantt-container-color will be affected
  */
  --dhx-gantt-container-color: #222;
}
</style>

How to use source codes

dhtmlxGantt is shipped with style files in the following forms:

• codebase/dhtmlxgantt.css - a prebuilt compressed CSS file for skins, ready for production use;
• codebase/sources/dhtmlxgantt.css - prebuilt readable CSS files;
• codebase/sources/less/ - source less files of the Gantt skins.

The latter can be used for deep customization of existing skins or for creating a new skin.

How to start

You can initialize codebase/sources/less as an NPM package. The sources will contain two types of files:

• style sheets;
• files with micro variables declaration which you can use for fine-tuning the gantt view or for creating a new skin.

How to build skins

In codebase/sources/less/ run:

> npm install

After install is completed, you can rebuild CSS files using the following commands:

> npm run build

Or

> npm run watch

The script will rebuild CSS files from sources and put them into the codebase folder of the gantt package, replacing the existing ones.

Structure

The structure of the less folder for version 9.0 (may be changed in future versions) is given below:

Images

• ./src/imgs - svg icons used by all skins
• ./src/iconfont - icons prebuilt into the web font

Skin definitions

The default set of variables is defined in the terrace skin, other skins redefine the corresponding variables and add styles.

• ./src/themes
  • ./src/themes/variables.less - common variables used by all skins, terrace skin
  • ./src/themes/contrast_black - contrast black skin variables
  • ./src/themes/contrast_white - contrast white skin variables
  • ./src/themes/material - material skin variables
  • ./src/themes/dark - dark skin variables
  • ./src/themes/flat - flat skin variables

Entry points for building skins

• theme.less
• package.json

Creating custom skin

In order to create a new skin, you can copy and rename one of the existing skins from the sources/less/src/themes folder. Follow the steps below:

1. Copy and rename one of the existing files from the sources/less/src/themes folder, e.g.:

-> copy:
codebase/sources/less/src/themes/material.less

-> rename to:
codebase/sources/less/src/themes/custom.less

2. Import the new file in sources/less/src/themes/index.less, like this:

@import "./custom";

And add the content as in:

:root[data-gantt-theme='custom'] {
    --dhx-gantt-theme: custom;
    --dhx-gantt-font-family: Roboto, Helvetica, Arial, sans-serif;

    --dhx-gantt-base-colors-primary: #0288D1;

}

Note that the skin variables should be defined under the :root elements, using the data-gantt-there selector.

A new theme must include the --dhx-gantt-theme variable with the theme name.

3. Rebuild skins by running:

npm run build

note

Note that Gantt may apply some predefined settings to the calendar based on the applied skin. When you create a new skin by copying an existing one, you may need to apply the corresponding settings to the Gantt manually.

JS styling settings

Note that not all aspects of Gantt styling are controlled from CSS, some parameters are defined from the JavaScript configuration, for example the following properties:

• link_line_width
• link_radius
• link_arrow_size
• scale_height
• row_height