Урок 19. Примеры: фирменная тема

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

⚡ Кратко

Меняем primary, добавляем бренд-токен, настраиваем радиусы и собираем страницу-образец темы.

1. Смена основного цвета

/* было: нейтральный тёмный */
:root { --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); }

/* стало: фирменный синий */
: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); }

Одна правка меняет все основные кнопки, активные ссылки, выделение в меню и кольцо фокуса — везде, где компоненты используют --primary.

2. Страница-образец темы

Полезная практика: заведите в проекте страницу, где показаны все токены и основные компоненты. На ней сразу видно последствия любой правки.

primary

secondary

muted

accent

Badge

Карточка

Приглушённый текст на поверхности карточки.

<div class="space-y-4 rounded-xl bg-background p-4">
  <div class="grid gap-2 sm:grid-cols-4">
    <div class="rounded-lg bg-primary p-3 text-xs text-primary-foreground">primary</div>
    <div class="rounded-lg bg-secondary p-3 text-xs text-secondary-foreground">secondary</div>
    <div class="rounded-lg bg-muted p-3 text-xs text-muted-foreground">muted</div>
    <div class="rounded-lg bg-accent p-3 text-xs text-accent-foreground">accent</div>
  </div>
  <div class="flex flex-wrap items-center gap-2">
    <button class="inline-flex h-8 items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground">Основная</button>
    <button class="inline-flex h-8 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-muted">Контурная</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>
    <span class="inline-flex h-5 items-center rounded-4xl bg-primary px-2 text-xs font-medium text-primary-foreground">Badge</span>
  </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">Приглушённый текст на поверхности карточки.</p>
  </div>
  <input class="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50" placeholder="Поле ввода">
</div>

Переключите тему страницы — образец покажет, как тема ведёт себя целиком, а не в одном компоненте.

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

📄 src/index.css

/* src/index.css — добавляем свою семантическую пару */
@theme inline {
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
}

:root {
  --brand: oklch(0.55 0.21 264);
  --brand-foreground: oklch(0.985 0 0);
}

.dark {
  --brand: oklch(0.62 0.19 264);
  --brand-foreground: oklch(0.145 0 0);
}

// src/components/ui/button.tsx — используем токен в варианте
brand: "bg-brand text-brand-foreground hover:opacity-90"

Подложка bg-brand/10

<div class="flex flex-wrap items-center gap-3">
  <button class="inline-flex h-8 items-center justify-center rounded-lg bg-brand px-3 text-sm font-medium text-brand-foreground hover:opacity-90">Подписаться</button>
  <div class="rounded-lg border border-brand bg-brand/10 px-3 py-2 text-sm text-brand">Подложка bg-brand/10</div>
</div>

4. Характер интерфейса через радиус

radius: 0

Строгий, «инженерный» вид

radius: 0.625rem

Нейтральный, по умолчанию

radius: 1.5rem

Мягкий, «дружелюбный»

<div class="grid gap-4 sm:grid-cols-3">
  <div class="rounded-none bg-card p-3 text-sm text-card-foreground ring-1 ring-border">
    <p class="font-medium">radius: 0</p>
    <p class="mt-1 text-xs text-muted-foreground">Строгий, «инженерный» вид</p>
    <button class="mt-3 h-8 w-full rounded-none bg-primary text-xs text-primary-foreground">Кнопка</button>
  </div>
  <div class="rounded-lg bg-card p-3 text-sm text-card-foreground ring-1 ring-border">
    <p class="font-medium">radius: 0.625rem</p>
    <p class="mt-1 text-xs text-muted-foreground">Нейтральный, по умолчанию</p>
    <button class="mt-3 h-8 w-full rounded-lg bg-primary text-xs text-primary-foreground">Кнопка</button>
  </div>
  <div class="rounded-3xl bg-card p-3 text-sm text-card-foreground ring-1 ring-border">
    <p class="font-medium">radius: 1.5rem</p>
    <p class="mt-1 text-xs text-muted-foreground">Мягкий, «дружелюбный»</p>
    <button class="mt-3 h-8 w-full rounded-full bg-primary text-xs text-primary-foreground">Кнопка</button>
  </div>
</div>

5. Токены для графиков

<Bar dataKey="visits" fill="var(--color-chart-1)" />
<Bar dataKey="orders" fill="var(--color-chart-2)" />

Продажи по неделям

<div class="rounded-lg bg-card p-4 ring-1 ring-border">
  <p class="text-sm font-medium text-card-foreground">Продажи по неделям</p>
  <div class="mt-3 flex h-24 items-end gap-2">
    <div class="h-1/3 flex-1 rounded-t bg-chart-1"></div>
    <div class="h-2/3 flex-1 rounded-t bg-chart-2"></div>
    <div class="h-1/2 flex-1 rounded-t bg-chart-3"></div>
    <div class="h-full flex-1 rounded-t bg-chart-4"></div>
    <div class="h-3/4 flex-1 rounded-t bg-chart-5"></div>
  </div>
</div>

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

6. Токены боковой панели

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

<div class="flex overflow-hidden rounded-xl ring-1 ring-border">
  <aside class="w-44 bg-sidebar p-3 text-sidebar-foreground">
    <p class="text-xs font-semibold">Навигация</p>
    <nav class="mt-2 space-y-1 text-sm">
      <a class="block rounded-md bg-sidebar-accent px-2 py-1.5 text-sidebar-accent-foreground" href="#">Обзор</a>
      <a class="block rounded-md px-2 py-1.5 hover:bg-sidebar-accent" href="#">Отчёты</a>
      <a class="block rounded-md px-2 py-1.5 hover:bg-sidebar-accent" href="#">Настройки</a>
    </nav>
  </aside>
  <div class="flex-1 bg-background p-4 text-sm text-foreground">
    Панель имеет собственный набор токенов — её можно сделать темнее основного фона,
    не трогая остальные поверхности.
  </div>
</div>