daisyUI: цветовые имена и шаблоны классов — необходимая таблица для смены темы
daisyUI ценят прежде всего за простую смену темы. Но это преимущество теряется, когда разработчик или дизайнер жёстко прописывает фиксированные Tailwind-цвета вроде bg-blue-500. Вместо этого используйте семантические имена цветов daisyUI — primary, base-100, error — и применяйте их через классы btn-primary, bg-base-200, text-error. Тогда при смене темы весь UI автоматически подстроится.
Главное — знать имена цветов и шаблоны классов и правильно сочетать их в разметке. Опытные дизайнеры делают это интуитивно, но новичкам и backend/full-stack-разработчикам, которые лишь иногда занимаются UI, проще держать этот cheat sheet под рукой, чем каждый раз искать в документации. В статье собрана таблица: когда использовать какие имена цветов и как связывать их с классами.
Цветовые имена (когда использовать)
| Имя цвета | Когда использовать (коротко) | Пример использования |
|---|---|---|
primary |
Основной цвет бренда | Главные кнопки, ключевые CTA |
primary-content |
Текст/иконки на primary |
Текст на 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 |
Текст/иконки на серии base |
Основной текст |
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 | placeholder-{COLOR} |
placeholder-base-content |
Настройка прозрачности
| Цель | Шаблон | Пример |
|---|---|---|
| Лёгкий фон | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| Ненавязчивая граница | border-{COLOR}/30 |
border-error/30 |
| Приглушённый текст | text-{COLOR}/70 |
text-base-content/70 |
| Интенсивность hover | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
Чтобы настроить интенсивность/прозрачность, добавьте
/{число}(в процентах) к классу. Переопределять семантические цвета можно, но добавлять произвольные цвета прямо в HTML не стоит: это ломает консистентность и может дать неожиданные результаты при смене темы.
Читайте также:
Комментариев нет.