For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ru/docs/web/theming.md (or send Accept: text/markdown).

Тема продукта

Настраивайте продуктовый chrome кита под свой SaaS — не редактируя маркетинговую тему бренда.

Задать вопрос об этом руководстве

Настройка и конфигурация

Перед любым действием прочтите Перед началом работы и Основные сведения о терминале. В этих инструкциях предполагается, что вы открыли полный монорепозиторий supastack в VS Code; его корень package.json отмечает корень репозитория. В командах pnpm пакет рабочей области представляет собой папку приложения или общего кода; В продукте рабочее пространство — это контейнер данных и граница безопасности команды. corepack pnpm --filter ... выбирает один пакет из монорепозитория, пока команды выполняются из его корня. Если вы открыли только синхронизированную папку мобильного устройства или рабочего стола, она не содержит веб-серверной части, настройки Docker или корневых сценариев: запустите серверную часть из этого монорепозитория или доступного размещенного сервера и используйте собственные сценарии папки платформы. Переменная среды — это именованный параметр, хранящийся в локальном файле .env или на панели управления хостингом; перезапустите соответствующее приложение после его изменения и не допускайте попадания секретов сервера в значения NEXT_PUBLIC_ и EXPO_PUBLIC_.

1. В VS Code откройте apps/web/app/app-theme.css для экранов продуктов, для которых выполнен вход, и apps/web/src/theme/catalog.ts, чтобы добавить цветовой пакет. Не редактируйте apps/web/app/theme.css для цветов продукта; он контролирует маркетинговый бренд.

2. Из корня репозитория запустите corepack pnpm --filter @supastack/web dev, затем посетите http://localhost:3000/settings/appearance..

3. Измените токен в локальной ветке и обновите предварительный просмотр. Ожидается: панель управления управляет обновлениями, в то время как на домашней странице сохраняется выбранная маркетинговая тема.

Маркетинговый бренд и тема продукта — разные файлы. Редактируйте apps/web/app/app-theme.css для chrome дашборда, auth, настроек, биллинга, чата и организаций. Добавляйте цветовые пакеты в apps/web/src/theme/catalog.ts. Расширяйте оси плотности, радиуса, шрифта и макета в apps/web/src/theme/presets.ts плюс соответствующие правила html[data-*] в app-theme.css. Выбирайте маркетинговую идентичность в apps/web/src/theme/marketing-theme.ts (MARKETING_THEME_MODE: locked | inherit | id пакета) вместо редактирования apps/web/app/theme.css — блокировка этого файла через .marketing-theme:not(.app-theme):not([data-theme]):not([data-marketing-theme="inherit"]) по умолчанию сохраняет бренд главной supastack Obsidian.

Во время работы раздел Настройки → Оформление → ThemePicker сохраняет цвет, плотность, скругление, шрифт и макет в cookie браузера и localStorage, чтобы theme-boot.ts восстанавливал все оси до первой отрисовки, а также синхронизирует полный набор настроек оформления авторизованного пользователя между браузерами через user_appearance (GET/PUT /api/account/appearance). На этой же странице монтируется галерея UI кита, где цветовые пакеты и пресеты сразу обновляют кнопки, поля ввода, карточки, бейджи и диалоги. Подробности дизайна и готовые примеры кода приведены в docs/design/kit-product-theme.md и docs/design/kit-ui-gallery.md.

/* Edit product chrome here — not theme.css */
.app-theme {
  --radius-card: 14px;
  background: var(--page);
  color: var(--text);
}
.app-theme .button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* catalog.ts — append a ThemeDefinition with every THEME_TOKEN_NAMES entry */
{
  id: "coral",
  name: "Coral",
  colorScheme: "light",
  tokens: { "--page": "#fff7f4", "--accent": "#e06b4f" /* …full token set… */ }
}

Команды для копирования

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

corepack pnpm --filter @supastack/web dev

# In a second terminal, after changing a theme token:
corepack pnpm test -- apps/web/src/theme/contrast.test.ts

Рабочий процесс внедрения

Добавляя пакет, держите contrast.test.ts зелёным. Добавляя id пресета, обновляйте и presets.ts, и ремаппинги html[data-density|data-radius|data-font|data-layout] в app-theme.css, чтобы ThemePicker и загрузка без FOUC оставались согласованными.

Сохраняйте общую геометрию четырёх плиток бренда в marketing/brand-geometry.ts для маркетинговых поверхностей. Знаки в шапке остаются прозрачными; иконки favicon/app сохраняют скруглённую чёрную подложку. Чисто маркетинговые страницы остаются Obsidian, пока MARKETING_THEME_MODE остаётся "locked" (умолчание кита); продукты могут закрепить другой пакет или наследовать выбор посетителя.

Проверка и устранение неполадок

Если изменение цвета влияет на домашнюю страницу маркетинга, убедитесь, что вы редактировали файл app-theme.css, и просмотрите apps/web/src/theme/marketing-theme.ts.. Если текст становится трудночитаемым, восстановите предыдущее значение и запустите corepack pnpm test -- apps/web/src/theme/contrast.test.ts из корня, прежде чем повторить попытку.

После редактирования токенов темы или пакетов кита проверьте, что ThemePicker на /settings/appearance обновляет галерею UI кита плюс /dashboard, /auth, /billing, /chat и оболочки организаций. Подтвердите, что / остаётся на маркетинговой блокировке Obsidian (если MARKETING_THEME_MODE не говорит иное). Запустите модульные контракты темы (catalog, presets, contrast, theme-ownership, kit-ui-gallery) и Playwright application-theme, когда доступен. Проверьте фокус с клавиатуры, контраст, 320px и reduced motion.