Настройка цветовой схемы

Intro.js позволяет создавать интерактивные пошаговые руководства по интерфейсу веб-приложений, предоставляя возможность детально настраивать визуальное оформление подсказок. Управление цветовой схемой играет ключевую роль в гармонизации руководства с дизайном сайта и повышении удобочитаемости элементов.

Настройка фона и текста подсказок

Каждый шаг в Intro.js можно стилизовать через объект опций при инициализации или через методы setOption. Основные параметры, влияющие на цветовую схему подсказки:

  • tooltipClass – позволяет добавить CSS-класс к тултипу для глобальной кастомизации цвета, шрифта, тени.
  • highlightClass – CSS-класс для подсвечиваемого элемента, где можно настроить границы, фон и цвет текста.
  • overlayOpacity – задаёт прозрачность затемнения фона, что косвенно влияет на восприятие цветовой схемы подсказки.

Пример применения:

introJs().setOptions({
  tooltipClass: 'custom-tooltip',
  highlightClass: 'custom-highlight',
  overlayOpacity: 0.6
}).start();

CSS:

.custom-tooltip {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Arial', sans-serif;
}

.custom-highlight {
  border: 3px solid #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
}

Индивидуальная цветовая настройка шагов

Для различных шагов можно задавать уникальные цвета через атрибут data-step и data-intro, сочетая их с CSS-классами. Например:

<button data-step="1" data-intro="Кнопка отправки формы" class="btn-send">Отправить</button>
<button data-step="2" data-intro="Поле ввода email" class="input-email">Email</button>

CSS:

.btn-send.introjs-highlight {
  border-color: #27ae60;
  background-color: rgba(39, 174, 96, 0.1);
}

.input-email.introjs-highlight {
  border-color: #2980b9;
  background-color: rgba(41, 128, 185, 0.1);
}

Такой подход позволяет визуально различать шаги и поддерживать соответствие фирменным цветам интерфейса.

Персонализация стрелок и кнопок

Цвета навигационных элементов тоже настраиваются через CSS:

  • Стрелки – .introjs-tooltip .introjs-arrow и .introjs-tooltip .introjs-arrow-border
  • Кнопки – .introjs-nextbutton, .introjs-prevbutton, .introjs-skipbutton

Пример:

.introjs-tooltip .introjs-arrow {
  border-top-color: #34495e;
}

.introjs-nextbutton {
  background-color: #3498db;
  color: #ffffff;
  border-radius: 4px;
  padding: 6px 12px;
}

.introjs-skipbutton {
  background-color: transparent;
  color: #e74c3c;
  border: 1px solid #e74c3c;
  border-radius: 4px;
}

Использование прозрачных фонов или контрастных цветов для кнопок и стрелок повышает читаемость и визуальный фокус на интерактивных элементах.

Адаптивная цветовая схема

Intro.js поддерживает динамическую смену стилей с помощью JavaScript. Это полезно при смене темы сайта (светлая/тёмная) или при необходимости адаптации под пользовательские настройки. Пример переключения схемы:

function setTheme(theme) {
  const tooltip = document.querySelectorAll('.introjs-tooltip');
  tooltip.forEach(el => {
    if (theme === 'dark') {
      el.style.backgroundColor = '#2c3e50';
      el.style.color = '#ecf0f1';
    } else {
      el.style.backgroundColor = '#ffffff';
      el.style.color = '#2c3e50';
    }
  });
}

Вызов функции перед запуском интро:

setTheme('dark');
introJs().start();

Использование CSS-переменных для упрощения изменений

Для масштабных проектов удобно задавать цветовую схему через CSS-переменные, что позволяет централизованно управлять всей цветовой палитрой:

:root {
  --intro-bg: #2c3e50;
  --intro-text: #ecf0f1;
  --intro-highlight: rgba(231, 76, 60, 0.1);
}

.custom-tooltip {
  background-color: var(--intro-bg);
  color: var(--intro-text);
}

.custom-highlight {
  background-color: var(--intro-highlight);
}

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

Настройка цветового контраста для доступности

Высокий контраст между подсказкой и фоном улучшает читаемость для пользователей с нарушениями зрения. Важно учитывать:

  • Цвет текста и фон подсказки должны иметь контраст не менее 4.5:1.
  • Подсветка элемента должна быть заметной, но не слепящей.
  • Навигационные кнопки должны выделяться на фоне тултипов и страницы.

Использование правильных оттенков позволяет соблюдать стандарты WCAG и делает интро доступным для широкого круга пользователей.

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

Оглавление