Скины

dhtmlxGantt предоставляет несколько предопределённых скинов, которые можно использовать, чтобы изменить общий вид диаграммы Ганта:

1. Terrace (по умолчанию)
2. Dark
3. Material
4. Contrast Black
5. Contrast White
6. Skyblue
7. Meadow
8. Broadway

Начиная с версии 9.0, все скины входят в основной файл dhtmlxgantt.css. Скин можно активировать, установив свойство gantt.skin:

gantt.skin = "dark";

Или вызвав метод gantt.setSkin():

gantt.setSkin("dark");

В Gantt версии 8.0 и ранее скины определяются в отдельных CSS-файлах.

Использование шрифтов

По умолчанию скины импортируют шрифт Inter с https://fonts.googleapis.com. Подробнее о Google Fonts можно узнать здесь.

@import (css) url(
'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'
);

При необходимости вы можете удалить шрифт напрямую из файлов .less в папке codebase/sources/less/, а затем пересобрать скин, как описано в статье Решения по настройке скинов.

'Terrace' skin

Чтобы применить скин по умолчанию, подключите файл CSS по умолчанию:

• dhtmlxgantt.css

Скин по умолчанию

'Dark' skin

Чтобы применить скин 'Dark', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "dark";

Темный скин

'Material' skin

Чтобы применить скин 'Material', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "material";

Material theme

Начиная с версии v6.3, импорт шрифта Roboto был удалён из скина Material. При необходимости вы можете добавить шрифт Roboto вручную, как показано:

<link rel="stylesheet" href="'https://fonts.googleapis.com/css?'+
    +'family="Open+Sans|Roboto:regular,medium,thin,bold"'">

'Contrast Black' skin

Чтобы применить скин 'Contrast Black', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "contrast-black";

Тема с высоким контрастом - Black

'Contrast White' skin

Чтобы применить скин 'Contrast White', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "contrast-white";

Тема с высоким контрастом - White

'Skyblue' skin

Чтобы применить скин 'Skyblue', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "skyblue";

'Skyblue' скин

'Meadow' skin

Чтобы применить скин 'Meadow', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "meadow";

'Meadow' скин

'Broadway' skin

Чтобы применить скин 'Broadway', подключите файл CSS по умолчанию:

• dhtmlxgantt.css

И установите скин через свойство gantt.skin:

gantt.skin = "broadway";

'Broadway' скин