Кастомизация цветовой схемы

Кастомизация цветовой схемы Flatpickr строится вокруг переопределения стандартных CSS-правил, которые библиотека подключает по умолчанию. Базовая стилизация реализована через файл flatpickr.min.css, в котором определены все ключевые визуальные состояния календаря: дни, навигация, выбранные значения, диапазоны и вспомогательные элементы интерфейса.

Основной принцип изменения цветовой схемы заключается не в модификации JavaScript-логики, а в точечном переопределении CSS-классов с более высокой специфичностью либо подключении собственного слоя поверх стандартных стилей.

Интерфейс Flatpickr разбит на несколько визуальных блоков:

  • контейнер календаря (.flatpickr-calendar)
  • шапка с навигацией (.flatpickr-months)
  • область дней (.flatpickr-days)
  • отдельные дни (.flatpickr-day)
  • состояния дней (hover, selected, today, disabled)

Каждый из этих блоков имеет набор классов, которые можно переопределять независимо.

Базовое переопределение цветовой схемы

Самый простой способ изменить палитру — подключить собственный CSS-файл после стандартного:

<link rel="stylesheet" href="flatpickr.min.css">
<link rel="stylesheet" href="custom-flatpickr.css">

Далее переопределяются ключевые элементы:

.flatpickr-calendar {
  background: #1e1e2f;
  color: #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

Контейнер задаёт базовый фон и общую цветовую доминанту интерфейса.

Цвета навигации и заголовков

Навигационная часть включает стрелки переключения месяцев и заголовок текущего месяца:

.flatpickr-months {
  background: #2a2a3d;
}

.flatpickr-current-month {
  color: #ffffff;
  font-weight: 600;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: #9aa0ff;
  transition: fill 0.2s ease;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: #ffffff;
}

Здесь важную роль играет свойство fill, поскольку стрелки реализованы через SVG.

Стилизация сетки дней

Основная часть интерфейса — таблица дней месяца:

.flatpickr-day {
  color: #d0d0d0;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.flatpickr-day:hover {
  background: #3a3a55;
  color: #ffffff;
}

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

Выбранные даты и активные состояния

Состояние выбора является центральным визуальным элементом:

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #6c7cff;
  border-color: #6c7cff;
  color: #ffffff;
}

Для диапазонов важно поддерживать единый цветовой язык, чтобы начало, конец и промежуточные дни воспринимались как единая сущность.

Дополнительно часто настраивается фокус:

.flatpickr-day:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(108, 124, 255, 0.4);
}

Состояние текущего дня

Текущая дата обычно выделяется отдельно от выбранных значений:

.flatpickr-day.today {
  border: 1px solid #6c7cff;
  background: transparent;
}

При этом важно не конфликтовать с .selected, так как один и тот же день может быть одновременно текущим и выбранным.

Отключённые даты

Отключённые элементы должны визуально терять приоритет:

.flatpickr-day.disabled,
.flatpickr-day.notAllowed {
  color: #555;
  background: transparent;
  cursor: not-allowed;
  opacity: 0.4;
}

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

Темная и светлая схемы

Часто цветовая кастомизация реализуется через модификатор класса на уровне контейнера:

.dark .flatpickr-calendar {
  background: #121212;
  color: #eaeaea;
}

.dark .flatpickr-day:hover {
  background: #2c2c2c;
}

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

Использование CSS-переменных

Более масштабируемый способ — вынесение цветов в переменные:

:root {
  --fp-bg: #ffffff;
  --fp-text: #222;
  --fp-accent: #6c7cff;
}

.flatpickr-calendar {
  background: var(--fp-bg);
  color: var(--fp-text);
}

.flatpickr-day.selected {
  background: var(--fp-accent);
}

При необходимости смены темы достаточно переопределить переменные:

.dark {
  --fp-bg: #1e1e2f;
  --fp-text: #e6e6e6;
  --fp-accent: #8a94ff;
}

Градиенты и сложные фоны

Вместо однотонных цветов часто применяются градиенты:

.flatpickr-day.selected {
  background: linear-gradient(135deg, #6c7cff, #8a94ff);
  border: none;
}

Это усиливает визуальную глубину интерфейса, особенно в современных UI-системах.

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

Плавность смены состояний достигается через transition:

.flatpickr-day {
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

Без этого переходы между состояниями hover/selected выглядят резкими и менее предсказуемыми.

Перекрытие встроенных тем

Flatpickr поставляется с несколькими встроенными темами (например, airbnb, material_blue). Однако они также основаны на CSS и могут быть полностью переопределены.

При подключении темы важно учитывать порядок загрузки:

  1. базовый flatpickr.min.css
  2. файл темы
  3. пользовательские переопределения

Именно последний слой должен содержать всю кастомную цветовую логику, иначе стандартные значения перекроют изменения.

Изоляция кастомных стилей

Для предотвращения конфликтов с глобальными стилями часто используется обёртка:

.fp-wrapper .flatpickr-calendar {
  background: #202030;
}

Такой подход позволяет использовать разные цветовые схемы на одной странице для нескольких экземпляров календаря.

Работа с состояниями через data-атрибуты

Хотя Flatpickr не требует data-атрибутов для стилизации, они могут использоваться для внешнего управления темами:

<div class="fp-wrapper" data-theme="dark"></div>
.fp-wrapper[data-theme="dark"] .flatpickr-calendar {
  background: #141421;
}

Контраст и доступность

При изменении цветовой схемы необходимо учитывать читаемость:

  • минимальный контраст текста и фона
  • различимость выбранных и неактивных дней
  • отсутствие конфликтов между .today и .selected

Особенно критично это при использовании насыщенных акцентных цветов, так как они легко «перекрывают» второстепенные состояния.

Композиция многослойной стилизации

Сложные темы строятся как комбинация слоёв:

  • базовый фон календаря
  • сетка дней
  • интерактивные состояния
  • выделенные диапазоны
  • системные состояния (disabled, today)

Каждый слой должен иметь отдельную цветовую роль, иначе визуальная иерархия нарушается, и интерфейс становится нечитаемым.

Оглавление