Настройка Скинов

Начиная с версии 9.0, скины Gantt используют CSS-переменные, что облегчает их настройку и стилизацию под ваши нужды.

Ключевые CSS-переменные:

: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);
 
    /* задачи */
 
    --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);
 
}

Вы можете найти все переменные в файле codebase/sources/less/src/themes/variables.less.

Как настроить скины

Чтобы изменить внешний вид Gantt, вы можете переопределить необходимые CSS-переменные в вашем стиле. Вот пример:

<style>:root {
 /* шкалы */
  --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;
 
  /* задачи */
  --dhx-gantt-task-background: #3db9d3;
  --dhx-gantt-task-color: #FFFFFF;
  --dhx-gantt-project-background: #6AA84F;
  --dhx-gantt-project-color: #FFFFFF;
 
  /* связи */
  --dhx-gantt-link-background: #ffa011;
  --dhx-gantt-link-background-hover: #ffa011;
 
}
</style>

Related sample: Change skin dynamically

Когда вы определяете переменные таким образом, вы можете переопределить стили по умолчанию, гарантируя, что ваши пользовательские стили применяются к Gantt.

Для правильного наследования по всей теме определяйте переменные на элементе :root.

Определение этих стилей на элементе :root гарантирует, что они наследуются и правильно применяются по всему компоненту. Таким образом, если переменная, используемая другими, будет переопределена, это повлияет на связанные стили по всему компоненту.

Например, переменная --dhx-gantt-scale-color наследуется от основной переменной цвета текста --dhx-gantt-container-color.

Переопределение --dhx-gantt-container-color на уровне :root гарантирует, что --dhx-gantt-scale-color адаптируется к изменению.

<style>:root {
    /* --dhx-gantt-scale-color и другие
  переменные, наследующие от `--dhx-gantt-container-color`,
  будут отражать это изменение
  */
  --dhx-gantt-container-color: #222;
 
}
</style>

Однако переопределение --dhx-gantt-container-color на более низком уровне в DOM, например, внутри .gantt_container, не повлияет на --dhx-gantt-scale-color.

<style>.gantt_container {
    /* только элементы, напрямую 
  использующие --dhx-gantt-container-color, будут затронуты
  */
  --dhx-gantt-container-color: #222;
}
</style>

Как использовать исходный код

Пакет Gantt включает файлы стилей в следующих формах:

codebase/dhtmlxgantt.css - сжатый CSS-файл для скинов, готовый для продакшна.
codebase/sources/dhtmlxgantt.css - читаемые предварительно собранные CSS-файлы.
codebase/sources/less/ - исходные LESS-файлы для скинов Gantt.

LESS-файлы позволяют более глубоко настраивать или создавать совершенно новые скины.

Как начать

Вы можете инициализировать codebase/sources/less как NPM-пакет. Исходники включают два типа файлов:

Таблицы стилей.
Файлы с микрообъявлениями переменных для настройки вида Gantt или создания новых скинов.

Как собирать скины

В codebase/sources/less/ выполните:

> npm install

После установки вы можете пересобрать CSS-файлы с помощью этих команд:

> npm run build

Или

> npm run watch

Эти скрипты сгенерируют CSS-файлы из исходников и поместят их в папку codebase, заменив существующие файлы.

Структура

Вот структура папки less для версии 9.0 (она может измениться в будущих версиях):

Изображения

./src/imgs - SVG-иконы для всех скинов.
./src/iconfont - Иконки, встроенные в веб-шрифт.

Определения скинов

Скин terrace определяет переменные по умолчанию, в то время как другие скины настраивают эти переменные и добавляют специфические стили.

./src/themes
- ./src/themes/variables.less - общие переменные для всех скинов, включая terrace.
- ./src/themes/contrast_black - переменные для контрастного черного скина.
- ./src/themes/contrast_white - переменные для контрастного белого скина.
- ./src/themes/material - переменные для скина material.
- ./src/themes/dark - переменные для темного скина.
- ./src/themes/flat - переменные для плоского скина.

Точки входа для сборки скинов

theme.less
package.json

Создание пользовательского скина

Чтобы создать новый скин, скопируйте и переименуйте один из существующих скинов в папке sources/less/src/themes. Следуйте этим шагам:

1) Скопируйте и переименуйте существующий файл, например:

-> копировать:
codebase/sources/less/src/themes/material.less
 
-> переименовать в:
codebase/sources/less/src/themes/custom.less

2) Импортируйте новый файл в sources/less/src/themes/index.less следующим образом:

@import "./custom";

Затем добавьте содержимое, например:

:root[data-gantt-theme='custom'] {
    --dhx-gantt-theme: custom;
    --dhx-gantt-font-family: Roboto, Helvetica, Arial, sans-serif;
 
    --dhx-gantt-base-colors-primary: #0288D1;
 
}

Не забудьте определить переменные скина под элементом :root, используя селектор data-gantt-theme.

Новая тема должна включать переменную --dhx-gantt-theme с именем темы.

3) Пересоберите скины, выполнив:

npm run build

Gantt может применять некоторые предустановленные настройки календаря в зависимости от используемого скина. Если вы создаете новый скин, копируя существующий, возможно, вам потребуется вручную настроить эти параметры в Gantt.

Настройки стилизации JS

Имейте в виду, что не все стили Gantt контролируются через CSS. Некоторые настройки задаются через JavaScript-конфигурацию, включая:

К началу