daisyUI Цветовые имена и шаблоны классов: необходимая таблица для смены темы
daisyUI используется главным образом для легкой смены темы. Однако эта выгода рушится, когда разработчик/дизайнер сразу вставляет фиксированные цвета Tailwind, такие как bg-blue-500. Вместо этого, если использовать смысловые имена цветов, предоставляемые daisyUI, например primary, base-100, error, и писать HTML как btn-primary, bg-base-200, text-error, то при смене темы весь UI автоматически обновится.
Итак, ключевой момент — знать имена цветов и шаблоны классов, и комбинировать их в разметке. Опытный дизайнер может интуитивно это делать, но новичок или бэкенд/полный стек разработчик, который иногда работает с UI, быстрее будет, если держать этот чек-лист рядом. В этой статье мы систематизируем, когда использовать какие имена цветов и как их сочетать с классами в таблице.
Цветовые имена (когда использовать)
| Имя цвета | Когда использовать (коротко) | Пример использования |
|---|---|---|
primary |
Основной цвет бренда | Кнопка, основной CTA |
primary-content |
Текст/иконки над primary |
Цвет текста на кнопке |
secondary |
Вспомогательные действия/подбренд | Вспомогательная кнопка |
secondary-content |
Текст/иконки над secondary |
Текст в области secondary |
accent |
Акцент/выделение | Бейдж, ссылка, выделенный элемент |
accent-content |
Текст/иконки над accent |
Цвет текста над фоном accent |
neutral |
Нейтральный UI (тёмный тон) | Навигация, футер, глубокий панель |
neutral-content |
Текст/иконки над neutral |
Текст в области neutral |
base-100 |
Базовый фон страницы | Фон страницы/канваса |
base-200 |
Поверхность на один уровень выше | Карточка, фон секции |
base-300 |
Более чёткое разделение/слой | Разделитель, глубокий панель |
base-content |
Текст/иконки над базовой серией | Основной текст |
info |
Информация/руководство | Баннер, подсказка |
info-content |
Текст/иконки над info |
Цвет текста над фоном info |
success |
Успех/нормальное состояние | Уведомление об успехе |
success-content |
Текст/иконки над success |
Цвет текста над фоном success |
warning |
Предупреждение/опасность | Сообщение о предупреждении |
warning-content |
Текст/иконки над warning |
Цвет текста над фоном warning |
error |
Ошибка/опасность | Ошибка, разрушительное действие |
error-content |
Текст/иконки над error |
Цвет текста над фоном error |
Шаблоны классов (правила сочетания цветов)
| Цель | Шаблон | Пример |
|---|---|---|
| Фон | bg-{COLOR} |
bg-primary, bg-base-200 |
| Текст | text-{COLOR} |
text-base-content, text-error |
| Граница | border-{COLOR} |
border-neutral, border-base-300 |
| Градиент начало/середина/конец | from- / via- / to-{COLOR} |
from-primary via-accent to-secondary |
| Кольцо (фокус) | ring-{COLOR} |
ring-primary |
| Смещение кольца | ring-offset-{COLOR} |
ring-offset-base-100 |
| Заполнение SVG | fill-{COLOR} |
fill-accent |
| Края SVG | stroke-{COLOR} |
stroke-neutral-content |
| Тень | shadow-{COLOR} |
shadow-primary |
| Обводка | outline-{COLOR} |
outline-info |
| Разделитель (divide) | divide-{COLOR} |
divide-base-300 |
| Акцент формы | accent-{COLOR} |
accent-primary |
| Курсор | caret-{COLOR} |
caret-primary |
| Подчеркивание/декор | decoration-{COLOR} |
decoration-accent |
| Заполнитель | placeholder-{COLOR} |
placeholder-base-content |
Регулирование насыщенности с помощью opacity
| Цель | Шаблон | Пример |
|---|---|---|
| Светлый фон | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| Тонкая граница | border-{COLOR}/30 |
border-error/30 |
| Слабый текст | text-{COLOR}/70 |
text-base-content/70 |
| Уровень ховера | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
Чтобы изменить насыщенность цвета, добавьте к классу и имени цвета
/число(процент). Перезаписывать имена цветов допустимо, но добавлять новые цвета в HTML не рекомендуется, так как это нарушает единообразие дизайна и может привести к резким изменениям при смене темы.
Читайте также :