Готовые темы

Тема в daisyUI — это набор значений для всех семантических цветов, скруглений и размеров. В daisyUI 35 готовых тем: light, dark, cupcake, corporate, synthwave, retro, forest, nord и другие. Тема включается атрибутом data-theme, а разметка компонентов при этом не меняется.

Атрибут data-theme

Тему для всей страницы задают на теге <html>. В CDN-версии светлая и тёмная темы уже есть, а остальные подключаются отдельным файлом themes.css:

<!doctype html>
<html data-theme="cupcake">
<head>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <button class="btn btn-primary">Записаться</button>
  <button class="btn btn-secondary">Подробнее</button>
</body>
</html>

Кнопки стали пастельными — бирюзовой и розовой: так выглядят primary и secondary в теме cupcake. Замените значение на synthwave или retro и посмотрите, как меняются кнопки. Без атрибута действует тема по умолчанию — обычно light.

Тема для части страницы

data-theme работает на любом элементе: всё внутри него получает цвета этой темы. Так можно сделать, например, тёмный подвал на светлом сайте или сравнить темы рядом:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid gap-2 sm:grid-cols-3">
  <div data-theme="light" class="rounded-box p-4">
    <p class="mb-2 font-semibold">light</p>
    <button class="btn btn-primary btn-sm">Начать</button>
  </div>
  <div data-theme="dark" class="rounded-box p-4">
    <p class="mb-2 font-semibold">dark</p>
    <button class="btn btn-primary btn-sm">Начать</button>
  </div>
  <div data-theme="forest" class="rounded-box p-4">
    <p class="mb-2 font-semibold">forest</p>
    <button class="btn btn-primary btn-sm">Начать</button>
  </div>
</div>

Три блока с одинаковой разметкой выглядят по-разному: светлый, тёмный и тёмно-зелёный. Элемент с data-theme сам получает фон base-100 и цвет текста base-content своей темы.

Темы в проекте

При установке через npm по умолчанию включены только light и dark. Нужные темы перечисляют в настройках плагина в src/style.css:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake, forest;
}

Флаг --default делает тему основной, --prefersdark — темой для тех, у кого в системе включён тёмный режим. Значение themes: all; подключает все 35 тем, но каждая тема добавляет CSS, поэтому лучше перечислять только нужные.

Частая ошибка

Написать data-theme="cupcake" в CDN-версии без файла themes.css или в проекте без cupcake в списке themes. Ошибки не будет: атрибут просто ничего не найдёт, и страница останется в теме light. Если тема «не включается», первым делом проверьте, подключена ли она.