Урок 19. Темизация shadcn/ui

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

⚡ Кратко

Тема shadcn/ui — это набор пар «поверхность / текст на ней»: --background и --foreground, --card и --card-foreground, и так далее. Блок @theme inline связывает их с утилитами bg-card, text-card-foreground. Чтобы перекрасить проект, меняют значения переменных, а не классы компонентов.

О чём этот урок

Разберём весь набор токенов, добавим собственную семантическую пару для фирменного цвета, научимся менять радиусы одной переменной и обсудим, когда допустимо перекрашивать компонент через className, а когда нужно править тему.

Значения в примерах взяты из реального прогона init с базовым цветом neutral.

Структура урока

Теория

Пары токенов, @theme inline, радиусы, свой бренд.

Справочник

Все токены и соответствующие утилиты.

Примеры

Смена палитры, свой токен, тёмная тема, радиусы.

Старый vs Новый

hsl-переменные v3 против OKLCH-токенов v4.

Задания

Перекрасить проект под бренд.

Решения

Готовая тема с разбором.

Ошибки

Классы вместо токенов, забытая тёмная тема, слабый контраст.

Домашнее задание

Фирменная тема проекта.

Ресурсы

Документация по темизации.

Практика

  • Поменяйте --primary и посмотрите, сколько элементов изменилось.
  • Добавьте пару --brand / --brand-foreground.
  • Измените --radius и оцените, как поменялся характер интерфейса.

Навигация