daisyUI темы: 35 тем, чтобы решить проблему выбора цвета

daisyUI темы – это не просто поддержка «тёмного режима».
35 готовых палитр (тем), которые уже спроектированы на уровне продукта, и возможность применить их ко всему приложению единообразно.

Модный стиль с яркими цветами

В этой статье предполагается, что установка завершена.
Если нужно начать с установки, сначала посмотрите официальное руководство:
https://daisyui.com/docs/install/

Ключ к пониманию тем: «не задавайте цвет вручную»

Commandbox 광고

Чаще всего новички путаются именно здесь.

Неправильный способ Результат
Если в Tailwind прописать bg-white, text-slate-900, bg-blue-600 и т.д. При смене темы элемент остаётся фиксированным цветом.

То есть, чтобы использовать тему, не кодируйте цвета напрямую – используйте токены (семантические имена цветов), которые предоставляет daisyUI.

❌ Неправильный пример: игнорирование темы и жёсткое кодирование

<div class="bg-white text-slate-900 p-6 rounded-2xl">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>
</div>

✅ Правильный пример: использование токенов daisyUI, чтобы «подстраиваться» под тему

<div class="bg-base-100 text-base-content p-6 rounded-box">
  <button class="btn btn-primary">Save</button>
</div>

Важно не «какой цвет», а «какая роль».

  • bg-base-100 : основной фон экрана/карточки
  • text-base-content : основной цвет текста
  • btn-primary : основное действие продукта (CTA)

Тема меняет цвета в соответствии с этими ролями.

Что именно нужно использовать?

Чтобы правильно использовать темы 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)

Например, при создании «баннера предупреждения» не задавайте цвет напрямую, а указывайте роль.

<div class="bg-warning text-warning-content p-4 rounded-box">
  Информация о платеже отсутствует.
</div>

Применение темы: один data-theme меняет весь вид

Commandbox 광고

Применение темы удивительно простое.

<html data-theme="cupcake">
  <body>
    <div class="bg-base-100 text-base-content min-h-screen p-10">
      <button class="btn btn-primary">Primary</button>
    </div>
  </body>
</html>

Эта одна строка (data-theme) меняет весь набор цветовых переменных приложения.

Тема меняет не только «весь» вид: можно менять и по секциям

При разработке часто встречаются такие требования.

  • «Главная страница чистая, но баннер события должен быть ярче»
  • «Панель администратора в тёмном, пользовательский интерфейс – в светлом»

daisyUI позволяет добавить data-theme к конкретному DOM‑элементу, и только эта область будет использовать другую тему. Ограничений на вложенность нет.

<html data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">Весь сайт в тёмном режиме</h1>

      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
        Эта секция всегда светлая
        <span data-theme="retro" class="ml-2">Этот span в ретро‑стиле</span>
      </section>
    </main>
  </body>
</html>

Эта функция чаще используется в реальных проектах, чем простое переключение темы.

Управление темами: включайте только нужные

После установки управление активными темами осуществляется в блоке CSS @plugin "daisyui" { ... }.

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
  • themes – список, разделённый запятыми.
  • --default – тема по умолчанию
  • --prefersdark – тема по умолчанию, если пользователь предпочитает тёмный режим (prefers-color-scheme: dark)

Если хотите «включить всё и потом выбрать», можно сделать так.

@plugin "daisyui" {
  themes: all;
}

Но в большинстве продуктов удобно включать только необходимые темы.

Уникальная точка: «выбор темы» как продуктовая стратегия, а не просто дизайн

35 тем – это не просто «красивые скины». Я использую их так:

Этап Как применяю
MVP Пускаю несколько тем как «брендовые кандидаты» и быстро проверяю, как они сочетаются с UI/контентом
Операционный Поскольку цвета не кодируются напрямую, обновление бренда/сезонных акций сводится к «смене темы»
Командная работа Даже без дизайнера, соблюдая токены ролей, сохраняется согласованность

Идея проста.

Если избавиться от привычки «жёстко задавать цвет», тема становится инструментом мгновенного обновления всего приложения.

Когда нужны кастомные темы?

В итоге, для большинства случаев достаточно 35 базовых тем. Они уже высококачественные, и обычно достаточно «выбрать базовую тему + небольшие правки».

Однако бывают случаи, когда стоит рассмотреть кастомизацию (переопределение).

  • Ясно определённый брендовый цвет: если у компании/сервиса уже есть фирменный цвет, и вы хотите, чтобы он доминировал, выбираете одну из 35 тем и «покрываете» её брендовыми цветами.

В таком случае, вместо создания новой темы с нуля, проще переопределить только primary, secondary. Это позволяет сохранить баланс остальных тонов (фон, текст, состояния), а ключевые интерактивные элементы (кнопки, ссылки, CTA) будут окрашены в брендовый цвет.

Как именно переопределять primary, secondary – подробнее в следующем посте с кодом.

Анонс следующей части

В следующей статье планирую рассмотреть:

  • Практический паттерн «сохраняем тему, слегка меняем компоненты»
  • Как кастомизировать тему
  • Чит‑шит по цветовым переменным и классам, поддерживаемым daisyUI

До встречи!