Своя тема

Готовые темы подходят для старта, но у сайта обычно свои фирменные цвета. Своя тема в daisyUI — это набор CSS-переменных с названием темы. Переменные те же, что у встроенных тем, поэтому все компоненты сразу начинают использовать ваши цвета.

Переменные темы

Переменная	Что задаёт
`--color-primary`, `--color-primary-content`	Основной цвет и текст на нём
`--color-secondary`, `--color-accent`, `--color-neutral`	Остальные цвета бренда (каждый со своим `-content`)
`--color-base-100` … `--color-base-300`, `--color-base-content`	Фоны и основной текст
`--color-info`, `--color-success`, `--color-warning`, `--color-error`	Цвета состояний
`--radius-box`	Скругление карточек, модальных окон, уведомлений
`--radius-field`	Скругление кнопок, полей ввода, вкладок
`--radius-selector`	Скругление флажков, переключателей, значков
`--depth`, `--noise`	Объём и зернистость: `0` или `1`

Цвета в темах daisyUI записывают в формате oklch(светлота насыщенность оттенок), но подойдёт и привычный #2563eb.

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

В проекте на Vite тему описывают блоком @plugin "daisyui/theme" в src/style.css, после подключения самого daisyUI:

@import "tailwindcss";
@plugin "daisyui";
 
@plugin "daisyui/theme" {
  name: "learnup";
  default: true;
  prefersdark: false;
  color-scheme: light;
 
  --color-base-100: #ffffff;
  --color-base-200: #f1f5f9;
  --color-base-300: #e2e8f0;
  --color-base-content: #1e293b;
  --color-primary: #2563eb;
  --color-primary-content: #ffffff;
  --color-secondary: #f97316;
  --color-secondary-content: #ffffff;
 
  --radius-box: 1rem;
  --radius-field: 2rem;
}

name — название для data-theme, default: true делает тему основной, color-scheme подсказывает браузеру, светлая она или тёмная (от этого зависят полосы прокрутки и стандартные поля). Остальные цвета задают так же; полный набор удобно получить в генераторе тем на сайте daisyUI и скопировать оттуда.

Попробовать в браузере

В CDN-версии тему можно описать обычным CSS-правилом для [data-theme="learnup"] — те же переменные, только без блока @plugin:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<style>
  [data-theme="learnup"] {
    color-scheme: light;
    --color-base-200: #f1f5f9;
    --color-base-content: #1e293b;
    --color-primary: #2563eb;
    --color-primary-content: #ffffff;
    --color-secondary: #f97316;
    --color-secondary-content: #ffffff;
    --radius-box: 1rem;
    --radius-field: 2rem;
  }
</style>
 
<div data-theme="learnup" class="p-4">
  <div class="rounded-box bg-base-200 p-4">
    <p class="mb-3 font-semibold">Курс «Основы HTML» — $19</p>
    <button class="btn btn-primary">Записаться</button>
    <button class="btn btn-secondary">В избранное</button>
  </div>
</div>

Кнопки стали синей и оранжевой и полностью круглыми по краям, а панель — с крупным скруглением. Переменные, которые вы не задали, остаются от темы light.

Правка готовой темы

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

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: #2563eb;
}

Тема light осталась прежней, поменялся лишь primary.

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

Задать --color-primary, но забыть --color-primary-content. Текст на кнопке тогда берётся из старой темы и может слиться с новым фоном — например, светлый текст на светло-жёлтой кнопке. Меняя цвет, всегда задавайте и его пару -content.

Спасибо, что читаете!