Урок 19. Домашнее задание: фирменная тема

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~50 мин 🎯 Сложность: Продвинутая

⚡ Кратко

Сделать фирменную тему проекта: свой primary, свои роли success и warning, настроенный радиус и страница-образец для проверки.

Задание

  • выбрать фирменный цвет и задать --primary в обеих темах;
  • добавить роли --success и --warning с парами foreground;
  • подобрать --radius под характер продукта;
  • добавить варианты success и warning в Button и Badge;
  • собрать страницу-образец и проверить по ней обе темы;
  • проверить контраст основных пар в DevTools.

Подготовка окружения

cd tailwind-course
npm run dev
Подбирать цвета удобно прямо в DevTools: найдите :root, измените значение переменной и смотрите, как меняется весь интерфейс. Понравившееся значение перенесите в код.

Пошаговое решение

Шаг 1. Основной цвет

📄 src/index.css
/* src/index.css */
:root {
  --primary: oklch(0.55 0.21 264);
  --primary-foreground: oklch(0.985 0 0);
}
.dark {
  --primary: oklch(0.62 0.19 264);
  --primary-foreground: oklch(0.145 0 0);
}

В OKLCH первое число — светлота. Для тёмной темы обычно достаточно увеличить его на 0.05–0.1 и слегка уменьшить насыщенность.

Шаг 2. Новые роли

📄 src/index.css
@theme inline {
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --success: oklch(0.62 0.15 160);
  --success-foreground: oklch(0.985 0 0);
  --warning: oklch(0.75 0.15 75);
  --warning-foreground: oklch(0.21 0 0);
}

.dark {
  --success: oklch(0.72 0.14 160);
  --success-foreground: oklch(0.145 0 0);
  --warning: oklch(0.8 0.14 75);
  --warning-foreground: oklch(0.145 0 0);
}

Шаг 3. Варианты компонентов

// src/components/ui/button.tsx
success: "bg-success text-success-foreground hover:opacity-90",
warning: "bg-warning text-warning-foreground hover:opacity-90",

Шаг 4. Страница-образец и проверка

Соберите её один раз — и дальше каждая правка темы проверяется мгновенно. Пройдитесь по контрасту: основной текст, приглушённый текст, текст на кнопках, состояние ошибки.

Как проверить

  • Смена --primary меняет кнопки, ссылки, фокус — всё сразу.
  • Обе темы выглядят согласованно, ничего не «горит» и не тонет.
  • Контраст основного текста не ниже 4.5:1 в обеих темах.
  • В компонентах нет жёстко заданных цветов палитры.

Ориентир

Карточка на токенах

Работает в обеих темах без единого класса dark:.

<div class="space-y-3 rounded-xl bg-background p-4">
  <div class="flex flex-wrap gap-2">
    <button class="inline-flex h-8 items-center justify-center rounded-lg bg-brand px-3 text-sm font-medium text-brand-foreground">Основная</button>
    <button class="inline-flex h-8 items-center justify-center rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white">Успех</button>
    <button class="inline-flex h-8 items-center justify-center rounded-lg bg-amber-500 px-3 text-sm font-medium text-amber-950">Внимание</button>
    <button class="inline-flex h-8 items-center justify-center rounded-lg bg-destructive/10 px-3 text-sm font-medium text-destructive">Опасно</button>
  </div>
  <div class="rounded-lg bg-card p-3 text-sm text-card-foreground ring-1 ring-border">
    <p class="font-medium">Карточка на токенах</p>
    <p class="mt-1 text-muted-foreground">Работает в обеих темах без единого класса dark:.</p>
  </div>
</div>