--rd-bg
Фон календаря та градієнтів над і під колонками вибору часу.
Кастомізація
Кольори через CSS-змінні
Усі кольори RollDate Core винесені в CSS-змінні на .RollDate__container. Перевизначте тільки потрібні значення — без копіювання або редагування стилів бібліотеки.
Почніть із готової теми main, dark або light, а потім підлаштуйте фон, текст, акцент і стани під дизайн-систему свого проєкту.
Швидкий приклад
.RollDate__container {
--rd-accent: #10b981;
--rd-accent-strong: #059669;
--rd-accent-dark: #047857;
--rd-accent-muted: rgba(16, 185, 129, 0.18);
--rd-on-accent: #042f2e;
}
Важливо: порядок підключення CSS
Підключайте файл зі своїми змінними після стилів RollDate. Для окремого календаря використовуйте селектор на кшталт .booking-calendar .RollDate__container — так на одній сторінці можна мати кілька палітр, не зачіпаючи інші екземпляри.
Вбудовані палітри
RollDate має три готові палітри. Нижче видно, як ті самі CSS-змінні виглядають у темах main, dark і light.
main
dark
light
Кольорові токени
Це значення, з якими постачається rolldate.min.css. Скопіюйте потрібну змінну у свій CSS і задайте власний колір.
| Змінна | Роль | main | dark | light |
|---|---|---|---|---|
--rd-bg |
Тло панелі календаря | #232830 | #323232 | #ffffff |
--rd-border |
Рамка панелі та контролів | #343b48 | #626262 | #d8dde6 |
--rd-text-primary |
Насичений текст, активні підписи | #f1f5f9 | #e6e6e6 | #1f2937 |
--rd-text-secondary |
Номери днів, другорядний текст | #94a3b8 | #848685 | #5f6b7a |
--rd-text-disabled |
Недоступні дати | #4b5563 | #515252 | #a1aab8 |
--rd-text-disabled-contrast |
Вимкнені «сьогодні» / поточний місяць на приглушеному тлі | #64748b | #a2a2a2 | #8c97a8 |
--rd-header-muted |
Заголовок у режимі років | #94a3b8 | #848685 | #9aa3b2 |
--rd-weekday |
Назви днів тижня | #cbd5e1 | #f7f7f7 | #334155 |
--rd-hover-bg |
Тло ховера, другорядні кнопки | #2d3544 | #3e3e3e | #f3f6fb |
--rd-hover-border |
Кільця ховера та фокуса | #475569 | #686868 | #ccd5e3 |
--rd-accent |
«Сьогодні», крапки підсвітки, ховер акценту | #60a5fa | #609ef1 | #4f8ff7 |
--rd-accent-strong |
Основні кнопки, вибір часу, «сьогодні» в темі main | #2563eb | #368cfd | #2d7cff |
--rd-accent-dark |
Рамка вибраного дня | #1d4ed8 | #1e5093 | #1f5dc1 |
--rd-accent-muted |
М’яке акцентне тло, доріжка часу | rgba(37, 99, 235, 0.18) | #375985 | #d9e8ff |
--rd-range |
Ховер початку і кінця діапазону | #a78bfa | #a78bfa | #8b5cf6 |
--rd-range-strong |
Заливка початку і кінця діапазону | #7c3aed | #7c3aed | #6d28d9 |
--rd-range-muted |
Дні всередині вибраного діапазону | #3d3558 | #3d3558 | #ede9fe |
--rd-button-icon |
Іконки стрілок у заголовку | #cbd5e1 | #fff | #334155 |
--rd-on-accent |
Текст і іконки на залитому акценті / діапазоні / primary | #fff | #fff | #fff |
--rd-highlight-dot |
Типовий колір крапки підсвітки; колір дати має пріоритет | за замовчуванням --rd-accent |
||
Поверхня
--rd-border
Зовнішня рамка календаря та рамки другорядних кнопок у футері.
--rd-hover-bg
Фон елементів при наведенні та другорядних кнопок. У темах dark і light також використовується в блоці вибору часу.
--rd-hover-border
Рамка дня, місяця або року при наведенні та фокусі. У темах dark і light також оформлює блок вибору часу.
Текст
--rd-text-primary
Основний текст: доступні дати, активні місяці й роки, дні всередині діапазону та другорядні кнопки.
--rd-text-secondary
Другорядний текст: номери днів, місяці й роки, роздільник часу та лічильник додаткових позначок +N.
--rd-text-disabled
Текст недоступних дат, місяців і років — наприклад, поза min/max або заблокованих правилами доступності.
--rd-text-disabled-contrast
Текст для недоступного поточного дня, місяця або року, коли елемент показаний на приглушеному акцентному фоні.
--rd-header-muted
Неактивні назви місяця й року в заголовку під час перегляду років.
--rd-weekday
Назви днів тижня над сіткою календаря.
--rd-button-icon
Іконки переходу до попереднього та наступного місяця.
--rd-on-accent
Колір тексту й іконок поверх акцентної заливки: вибрані дати, межі діапазону, основні кнопки та активний сегмент AM/PM. Якщо акцент світлий, задайте тут темний колір для достатнього контрасту.
Акцент
--rd-accent
Основний акцент: поточний день у темах dark/light, стандартні позначки дат і частина станів наведення. Також використовується як типове значення для --rd-highlight-dot.
--rd-accent-strong
Насичений акцент для основних кнопок, вибраного часу, активного AM/PM і поточного дня в темі main.
--rd-accent-dark
Рамка вибраної дати в режимах single і multiple. Змінюйте разом із --rd-accent-strong, щоб стани виглядали узгоджено.
--rd-accent-muted
Приглушений акцент для недоступного поточного дня або місяця та доріжки вибору часу. У темних темах зручно використовувати напівпрозоре значення.
--rd-highlight-dot
Стандартний колір позначок під датами. Якщо highlightDates або highlightDate() задає колір для конкретної дати, він має пріоритет.
Діапазон
--rd-range
Заливка ховера на першому і останньому дні діапазону.
--rd-range-strong
Суцільна заливка початку і кінця діапазону. Текст на цих комірках береться з --rd-on-accent.
--rd-range-muted
Дні між початком і кінцем діапазону. Текст лишається --rd-text-primary.
Приклад
У цьому прикладі стандартний синій акцент замінено на зелений. JavaScript не змінюється — достатньо перевизначити CSS-змінні.
перевизначення --rd-accent
CSS
.my-brand .RollDate__container {
--rd-accent: #34d399;
--rd-accent-strong: #10b981;
--rd-accent-dark: #047857;
--rd-accent-muted: rgba(16, 185, 129, 0.22);
--rd-on-accent: #042f2e;
--rd-range: #2dd4bf;
--rd-range-strong: #0d9488;
--rd-range-muted: #134e4a;
}