Кастомизация темы Mantine

1 июля 2026

Внешний вид SaaS — первое, что видит пользователь после лендинга. Шаблон использует Mantine 7: зрелая component library с темизацией через объект theme, CSS variables и поддержкой dark mode из коробки. Вам не нужно писать дизайн-систему с нуля.

Базовая тема задаётся в app/lib/config/theme-playground.ts. Там primaryColor, fontFamily, headings, radius, shadows, breakpoints. Один файл — один источник правды. root.tsx передаёт тему в MantineProvider, все компоненты наследуют настройки автоматически.

Primary color влияет на кнопки, ссылки, focus rings, прогресс-бары. Mantine генерирует палитру оттенков (0–9) из базового цвета. Выберите цвет бренда — остальное подстроится. Для тонкой настройки переопределите colors в theme.

Типографика: fontFamily для body, fontFamilyMonospace для кода, отдельные размеры и веса для headings (h1–h6). Подключите Google Fonts или self-hosted woff2 в root links — затем укажите имя шрифта в theme.

Страница /theme — Theme Playground. ThemeCustomizerBar позволяет менять primary color, radius, font в реальном времени и видеть превью: кнопки, inputs, cards, badges. Согласуйте с дизайнером до коммита — меньше итераций «чуть синее».

Тёмная тема: переключатель в Header сохраняет colorScheme в localStorage и дублирует в cookie для SSR. При первом рендере сервер читает cookie и отдаёт правильную схему — без flash белого фона. Проверьте контраст в обоих режимах.

Компоненты приложения используют Mantine props (c, variant, size), а не хардкод hex в className. При смене темы всё обновляется. Если нашли #228be6 в JSX — замените на color="blue" или theme-зависимый токен.

Marketing-страницы и app-раздел делят одну тему. Лендинг не должен выглядеть иначе, чем dashboard — иначе пользователь чувствует «переход в другой продукт» после регистрации.

После финализации бренда скопируйте значения из playground в theme-playground.ts. Маршрут /theme можно скрыть в production (удалить из навигации или защитить admin-only), если playground не нужен конечным пользователям.

Кастомные компоненты в app/components/UI/ следуют тем же отступам и радиусам Mantine. PrefetchLink, карточки агентов, billing widgets — смотрите на них как на референс стиля.

Mantine поддерживает CSS modules и style props. Шаблон минимизирует кастомный CSS — prefer theme tokens. Если нужен уникальный лендинг-hero, изолируйте стили в модуле маршрута _marketing._index.tsx.

Доступность: при смене primary color проверьте контраст текста на кнопках (WCAG AA). Mantine defaults обычно проходят, кастомные пастельные цвета — не всегда. Инструменты: DevTools contrast checker или axe.