Анатомия темы Mantine – дизайн-система мечты

В (откроется в новой вкладке)Mantine 9 работа с темой строится вокруг функции createTheme(). Она принимает объект с настройками и возвращает готовую тему.

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  // Здесь будут наши настройки
});

function App() {
  return (
    <MantineProvider theme={theme}>
      {/* Ваше приложение */}
    </MantineProvider>
  );
}

Давайте рассмотрим самые важные параметры темы, которые вы будете использовать в 90% случаев.

1. Цвета (colors)

Mantine имеет встроенную палитру из 13 цветов, каждый из которых представлен 10 оттенками (от 0 до 9). Вы можете переопределить любой цвет или добавить свой.

import { createTheme } from '@mantine/core';

const theme = createTheme({
  colors: {
    // Переопределяем основной цвет (primary)
    blue: [
      '#eef3ff',
      '#dee6f2',
      '#bccbe5',
      '#9aadd9',
      '#7894cc',
      '#567abf',
      '#345fb2',
      '#26488a',
      '#1b3366',
      '#0f1f42',
    ],
    // Добавляем свой цвет для статусов
    brand: [
      '#f0f0ff',
      '#e0e0ff',
      '#c2c2ff',
      '#a3a3ff',
      '#8585ff',
      '#6666ff',
      '#4747ff',
      '#3636cc',
      '#262699',
      '#171766',
    ],
  },
});

Как это использовать в компонентах:

import { Button, Badge } from '@mantine/core';

function Demo() {
  return (
    <>
      {/* Используем переопределенный blue */}
      <Button color="blue">Синяя кнопка</Button>
      
      {/* Используем свой цвет brand */}
      <Badge color="brand">Новый бренд</Badge>
      
      {/* Используем оттенок цвета (от 0 до 9) */}
      <Button color="blue.3">Светло-синий</Button>
    </>
  );
}

2. Основной цвет (primaryColor и primaryShade)

Это цвет, который используется по умолчанию для всех компонентов, если не указан явно.

const theme = createTheme({
  primaryColor: 'brand',     // Используем наш цвет 'brand' как основной
  primaryShade: 5,           // Используем оттенок №5 по умолчанию
});

3. Шрифты (fontFamily и fontFamilyMonospace)

Задайте шрифты для всего приложения.

const theme = createTheme({
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif',
  fontFamilyMonospace: 'JetBrains Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
  headings: {
    // Настройка заголовков
    fontFamily: 'Inter, sans-serif',
    fontWeight: '600',
    sizes: {
      h1: { fontSize: '2.5rem', lineHeight: '1.2' },
      h2: { fontSize: '2rem', lineHeight: '1.3' },
      h3: { fontSize: '1.75rem', lineHeight: '1.3' },
      h4: { fontSize: '1.5rem', lineHeight: '1.35' },
      h5: { fontSize: '1.25rem', lineHeight: '1.4' },
      h6: { fontSize: '1rem', lineHeight: '1.5' },
    },
  },
});

4. Размеры и отступы (spacing и radius)

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

const theme = createTheme({
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  radius: {
    xs: '2px',
    sm: '4px',
    md: '8px',
    lg: '16px',
    xl: '24px',
  },
});

Теперь вы можете использовать эти значения в пропсах компонентов:

<Button radius="xl" p="lg">
  Большая скругленная кнопка
</Button>

Вот полный пример настройки темы:

import { createTheme, MantineProvider, Button, Badge, Title, Text } from '@mantine/core';

const theme = createTheme({
  colors: {
    brand: [
      '#f0f0ff', '#e0e0ff', '#c2c2ff', '#a3a3ff', 
      '#8585ff', '#6666ff', '#4747ff', '#3636cc', 
      '#262699', '#171766'
    ],
  },
  primaryColor: 'brand',
  primaryShade: 6,
  
  fontFamily: 'Inter, sans-serif',
  headings: {
    fontFamily: 'Inter, sans-serif',
    fontWeight: '600',
  },
  
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  
  radius: {
    xs: '2px',
    sm: '4px',
    md: '8px',
    lg: '12px',
    xl: '20px',
  },
  
  // Дополнительные глобальные настройки
  defaultRadius: 'md',
  shadows: {
    sm: '0 1px 3px rgba(0,0,0,0.05)',
    md: '0 4px 12px rgba(0,0,0,0.1)',
    lg: '0 8px 30px rgba(0,0,0,0.12)',
    xl: '0 20px 60px rgba(0,0,0,0.15)',
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <div style={{ padding: '32px' }}>
        <Title>Добро пожаловать!</Title>
        <Text size="lg" mt="sm" c="dimmed">
          Это приложение использует кастомную тему Mantine.
        </Text>
        
        <Button size="lg" mt="md" leftSection="✨">
          Основная кнопка
        </Button>
        
        <Badge size="lg" ml="md" color="blue">
          Синий бейдж
        </Badge>
        
        <Button variant="outline" color="gray" mt="md" ml="md">
          Outline кнопка
        </Button>
      </div>
    </MantineProvider>
  );
}

В Mantine 9 есть два подхода:

1. createTheme() — создает тему с нуля. Используйте его для большинства случаев, когда вы просто задаете свои значения поверх стандартных.
2. mergeMantineTheme() — используется для глубокого слияния с базовой темой. Нужен редко, только если вы хотите переопределить сложные вложенные структуры.

Для 95% случаев вам достаточно createTheme().

По мере роста проекта удобно выносить тему в отдельный файл:

// src/theme.ts
import { createTheme } from '@mantine/core';

export const theme = createTheme({
  colors: {
    brand: [
      '#f0f0ff', '#e0e0ff', '#c2c2ff', '#a3a3ff', 
      '#8585ff', '#6666ff', '#4747ff', '#3636cc', 
      '#262699', '#171766'
    ],
  },
  primaryColor: 'brand',
  primaryShade: 6,
  fontFamily: 'Inter, sans-serif',
  // ... остальные настройки
});

Сегодня вы научились:

1. Создавать тему с помощью createTheme()
2. Настраивать цвета, шрифты, отступы и радиусы
3. Использовать кастомные цвета в компонентах
4. Организовывать тему в отдельном файле

Что должно быть в вашем проекте после этого урока:

1. Тема вынесена в отдельный файл (theme.ts)
2. Настроен основной цвет (primaryColor)
3. Задан хотя бы один кастомный цвет в палитре
4. Настроен шрифт и размеры заголовков
5. Все компоненты внутри MantineProvider используют кастомную тему

В следующем уроке мы разберемся с цветовыми схемами — научимся управлять светлой и темной темой, а также добавим переключатель (toggle) для удобства пользователей.