Урок 19. Справочник: токены темы
⚡ Кратко
Токен → утилита: --card даёт bg-card,
text-card, border-card. Пары «фон / foreground»
всегда используются вместе.
Токены и утилиты
| Токен | Утилиты | Типичное применение |
|---|---|---|
--background | bg-background | фон страницы |
--foreground | text-foreground | основной текст |
--card | bg-card, text-card-foreground | карточки |
--popover | bg-popover, text-popover-foreground | меню, подсказки |
--primary | bg-primary, text-primary, text-primary-foreground | основные кнопки, ссылки |
--secondary | bg-secondary, text-secondary-foreground | второстепенные кнопки |
--muted | bg-muted, text-muted-foreground | подписи, неактивные зоны |
--accent | bg-accent, text-accent-foreground | подсветка при наведении |
--destructive | bg-destructive, text-destructive, ring-destructive | удаление, ошибки |
--border | border-border, ring-border | границы |
--input | border-input, bg-input | поля ввода |
--ring | ring-ring, border-ring | фокус |
--chart-1…5 | fill-chart-1, stroke-chart-2 | графики |
--sidebar… | bg-sidebar, text-sidebar-foreground | боковая панель |
Структура темы в CSS
📄 src/index.css
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline { /* 1. связь токенов с утилитами */ }
:root { /* 2. значения для светлой темы */ }
.dark { /* 3. значения для тёмной темы */ }
@layer base { /* 4. базовые стили документа */
* { @apply border-border outline-ring/50; }
body { @apply bg-background text-foreground; }
}Прозрачность токенов
| Запись | Что даёт |
|---|---|
bg-primary/10 | лёгкая подложка фирменного цвета |
ring-ring/50 | полупрозрачное кольцо фокуса |
bg-destructive/10 text-destructive | «мягкая» опасная кнопка |
border-foreground/10 | граница, работающая в обеих темах |
Прозрачность — главный приём для тёмной темы: один класс
выглядит уместно и на белом, и на тёмном, потому что подмешивается к фону
под собой.
Смена базового цвета
npx shadcn@latest init --force # заново записать конфигурацию и тему| baseColor | Характер |
|---|---|
neutral | чистый серый, без оттенка |
slate | холодный, синеватый |
zinc | слегка холодный |
gray | нейтрально-холодный |
stone | тёплый, бежевый |
⚠️ Проверить по документации: повторный
init --force перезапишет components.json и может
затронуть блок темы в CSS. Делайте это только на чистом рабочем дереве,
чтобы увидеть изменения в diff.Проверка темы
| Что проверить | Как |
|---|---|
| Контраст текста | DevTools → палитра цвета → значение контраста |
| Все пары | тестовая страница со всеми токенами (см. «Примеры») |
| Тёмная тема | переключатель темы плюс просмотр каждого экрана |
| Фокус | обход интерфейса клавишей Tab |