# daisyUI темы: 35 тем, чтобы решить проблему выбора цвета
daisyUI темы – это не просто поддержка «тёмного режима».
**35 готовых палитр (тем)**, которые уже спроектированы на уровне продукта, и возможность **применить их к всему приложению** единообразно.
> В этой статье предполагается, что установка завершена.
> Если нужно начать с установки, сначала посмотрите официальное руководство:
>
---
## Ключ к пониманию тем: «не задавайте цвет вручную» {#sec-648a5757ecf6}
Самое частое недоразумение новичков – это именно здесь.
| Неправильный способ | Результат |
|------------|------|
| Если в Tailwind прописать `bg-white`, `text-slate-900`, `bg-blue-600` и т.д. | При смене темы элемент остаётся **фиксированным цветом**. |
То есть, чтобы использовать тему, **не кодируйте цвета напрямую** – используйте **токены (семантические имена цветов)**, которые предоставляет daisyUI.
### ❌ Неправильный пример: игнорирование темы и жёсткое кодирование {#sec-0b5438bac864}
```html
```
### ✅ Правильный пример: использование токенов daisyUI, чтобы «подстраиваться» под тему {#sec-e1146fcf48a6}
```html
```
Важно не «какой цвет», а «какая роль».
- `bg-base-100` : основной фон экрана/карточки
- `text-base-content` : основной цвет текста
- `btn-primary` : основное действие продукта (CTA)
Тема меняет цвета в соответствии с этими ролями.
---
## Что именно нужно использовать? {#sec-7cfab9901bed}
Чтобы правильно использовать темы daisyUI, просто применяйте один из двух вариантов (или оба) в привычном режиме.
| Способ | Пример |
|--------|------|
| **Классы компонентов daisyUI** | `btn`, `btn-primary`, `alert`, `badge`, `card`, `navbar`, `input` … |
| **Классы токенов цвета daisyUI (семантические)** | Базовый фон/текст: `bg-base-100`, `bg-base-200`, `bg-base-300`, `text-base-content` Акцентные цвета: `bg-primary`, `text-primary`, `bg-secondary`, `bg-accent`, `bg-neutral` Состояния: `bg-info`, `bg-success`, `bg-warning`, `bg-error` (+ соответствующие `*-content`) |
Например, при создании «баннера предупреждения» не задавайте цвет напрямую, а указывайте роль.
```html
Информация о платеже отсутствует.
```
---
## Применение темы: один `data-theme` меняет весь вид {#sec-4d6308cbf561}
Применение темы удивительно простое.
```html
```
Эта одна строка (`data-theme`) меняет **весь набор цветовых переменных** приложения.
---
## Тема меняет не только «весь» вид: можно менять и по секциям {#sec-e0f142807b1a}
При разработке часто встречаются такие требования.
- «Главная страница чистая, но баннер события должен быть ярче»
- «Панель администратора в тёмном, пользовательский интерфейс – в светлом»
daisyUI позволяет добавить `data-theme` к конкретному DOM‑элементу, и **только эта область** будет использовать другую тему. Вложенность ограничений нет.
```html
Весь сайт в тёмном режиме
Эта секция всегда светлая
Этот span в ретро‑стиле
```
Эта функция чаще используется в реальных проектах, чем простое переключение темы.
---
## Управление темами: включайте только нужные {#sec-ab5d0648dae0}
После установки управление активными темами осуществляется в блоке CSS `@plugin "daisyui" { ... }`.
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes` – список, разделённый запятыми.
- `--default` – тема по умолчанию
- `--prefersdark` – тема по умолчанию, если пользователь предпочитает тёмный режим (`prefers-color-scheme: dark`)
Если хотите «включить всё и потом выбрать», можно сделать так.
```css
@plugin "daisyui" {
themes: all;
}
```
Но в большинстве продуктов удобно включать **только необходимые** темы.
---
## Уникальная точка: «выбор темы» как продуктовая стратегия, а не просто дизайн {#sec-612655295e82}
35 тем – это не просто «красивые скины». Я использую их так:
| Этап | Как применяю |
|------|-----------|
| **MVP** | Пускаю несколько тем как «брендовые кандидаты» и быстро проверяю, как они сочетаются с UI/контентом |
| **Операционный** | Поскольку цвета не кодируются напрямую, обновление бренда/сезонных акций сводится к «смене темы» |
| **Командная работа** | Даже без дизайнера, соблюдая токены ролей, сохраняется согласованность |
Идея проста.
> **Если избавиться от привычки «жёстко задавать цвет», тема становится инструментом мгновенного обновления всего приложения.**
---
## Когда нужны кастомные темы? {#sec-67726d664b47}
В итоге, **для большинства случаев достаточно 35 базовых тем**. Они уже высококачественные, и обычно достаточно «выбрать базовую тему + небольшие правки».
Однако бывают случаи, когда стоит рассмотреть кастомизацию (переопределение).
- **Ясно определённый брендовый цвет**: если у компании/сервиса уже есть фирменный цвет, и вы хотите, чтобы он доминировал, выбираете одну из 35 тем и «покрываете» её брендовыми цветами.
В таком случае, вместо создания новой темы с нуля, проще **переопределить только `primary`, `secondary`**. Это позволяет сохранить баланс остальных тонов (фон, текст, состояния), а ключевые интерактивные элементы (кнопки, ссылки, CTA) будут окрашены в брендовый цвет.
Как именно переопределять `primary`, `secondary` – подробнее в следующем посте с кодом.
---
## Анонс следующей части {#sec-b349bf2c99ab}
В следующей статье планирую рассмотреть:
- Практический паттерн «сохраняем тему, слегка меняем компоненты»
- Как кастомизировать тему
- Чит‑шит по цветовым переменным и классам, поддерживаемым daisyUI
До встречи!