# 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 под рукой, чем каждый раз искать в документации. В статье собрана таблица: **когда использовать какие имена цветов** и **как связывать их с классами**.

![Разработчик-робот и палитра цветов](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## Цветовые имена (когда использовать) {#sec-4d3fa8b26445}

| Имя цвета           | Когда использовать (коротко)       | Пример использования                        |
| ------------------- | ---------------------------------- | ------------------------------------------- |
| `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`                       |

---

## Шаблоны классов (правила сочетания цветов) {#sec-5007f90f39f0}

| Цель                     | Шаблон                      | Пример                                 |
| ------------------------ | --------------------------- | -------------------------------------- |
| Фон                      | `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`             |

---

## Настройка прозрачности {#sec-c72e6700b4d3}

| Цель                 | Шаблон                | Пример                           |
| -------------------- | --------------------- | -------------------------------- |
| Лёгкий фон           | `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 не стоит: это ломает консистентность и может дать неожиданные результаты при смене темы.

---

**Читайте также**:

* [daisyUI тема: 35 цветовых палитр для решения проблем с цветом](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)
* [Tailwind CSS плагин daisyUI: быстрое создание UI только с классами](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)