Next-02. Интерфейс и темы оформления

От стилей к системе оформления

Tailwind CSS позволяет применять стили классами прямо в разметке. Например, p-4 задаёт внутренний отступ, а rounded-lg – скругление. Названия и доступные возможности зависят от версии, поэтому сверяйтесь с документацией Tailwind CSS.

Если в сотнях компонентов вручную записать #ffffff, #171717 и похожие цвета, будущая смена палитры превратится в поиск каждого значения. Дизайн-токен – это именованное значение оформления, например --background или --primary. Запись с двумя дефисами – CSS-переменная: ей задают значение в CSS, а затем используют это значение в других правилах. Компонент использует имя назначения, а тема задаёт ему конкретный цвет.

:root {
  --background: #ffffff;
  --foreground: #171717;
}
 
.dark {
  --background: #171717;
  --foreground: #ffffff;
}
 
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

В обеих темах компоненты ссылаются на --background и --foreground. Блок @theme inline связывает эти значения с палитрой Tailwind, чтобы использовать утилиты bg-background и text-foreground. Меняются значения токенов, а не стили каждого компонента. Семантическое имя говорит, для чего нужен цвет, а не просто какое у него значение. Подробнее о переменных темы: документация Tailwind CSS.

Например, компоненту не нужно знать, светлая сейчас тема или темная:

export default function Page() {
  return (
    <main className="bg-background text-foreground rounded-xl p-6">
      <h1 className="text-xl font-semibold">Настройки профиля</h1>
      <p>Текст читабелен в обеих темах.</p>
    </main>
  );
}

Компонент выбирает роль цвета. Значение для этой роли задает тема. В реальном проекте роли нужны не только фону и тексту:

Не создавайте новый токен для каждого оттенка в макете. Сначала определите повторяющуюся роль, затем дайте ей имя. Если два элемента должны меняться одинаково при смене темы, они могут использовать один токен.

Поменяйте тему и основной цвет. Тема задаёт значения фона, текста и границы, а выбор акцента меняет токен --primary. Разметка и правила компонента при этом остаются теми же:

Сам переключатель темы обычно несложен. Труднее, если конкретные цвета уже разбросаны по компонентам: новую палитру придется искать вручную. Если компоненты с самого начала используют смысловые токены, светлая и темная темы задают два набора значений, а не две копии разметки. Проверяя обе темы во время разработки, раньше замечаете проблемы с контрастом, границами и состояниями. Токены не находят ошибки автоматически: каждый экран всё равно нужно просмотреть. В руководстве Tailwind по темному режиму разобран переключатель режима.

Что делает shadcn/ui

shadcn/ui – способ добавить компоненты в проект как исходный код. Команда установки помещает выбранные файлы компонентов в ваш проект: их можно читать и менять. Это отличается от установки готовой библиотеки, которая предоставляет компоненты из пакета. Компоненты включают разметку, поведение, доступность и стили; оформление опирается на роли вроде background, foreground, primary и muted. Смотрите введение в shadcn/ui и руководство по темам.

В названии shadcn/ui часть shadcn произносится по буквам: shad-c-n, примерно «шэд-си-эн». Так свой никнейм произносит автор проекта.

Задание

1. Подключите shadcn/ui к проекту по актуальной инструкции.
2. Добавьте кнопку и карточку из компонентов shadcn/ui.
3. Настройте светлую и тёмную темы через семантические токены.
4. Переключите тему и проверьте текст, фон, границы, кнопку и фокус с клавиатуры.

Не копируйте пример конфигурации из старого видео вслепую: у Tailwind и shadcn/ui меняются версии и настройки.