# daisyUI Цветовые имена и шаблоны классов: необходимая таблица для смены темы

daisyUI используется главным образом для **легкой смены темы**. Однако эта выгода рушится, когда разработчик/дизайнер сразу вставляет фиксированные цвета Tailwind, такие как `bg-blue-500`. Вместо этого, если использовать смысловые имена цветов, предоставляемые daisyUI, например `primary`, `base-100`, `error`, и писать HTML как `btn-primary`, `bg-base-200`, `text-error`, то при смене темы весь UI автоматически обновится.

Итак, ключевой момент — **знать имена цветов и шаблоны классов, и комбинировать их в разметке**. Опытный дизайнер может интуитивно это делать, но новичок или бэкенд/полный стек разработчик, который иногда работает с UI, быстрее будет, если держать этот чек-лист рядом. В этой статье мы систематизируем, **когда использовать какие имена цветов** и **как их сочетать с классами** в таблице.

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

---

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

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

---

## Шаблоны классов (правила сочетания цветов) {#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-{COLOR}`       | `placeholder-base-content`             |

---

## Регулирование насыщенности с помощью opacity {#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: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/)