Создание кастомной темы

Механизм темизации в Ant Design построен вокруг системы дизайн-токенов (Design Tokens) — набора параметров, описывающих визуальные свойства интерфейса: цвета, размеры, отступы, шрифты, тени, радиусы скругления и другие характеристики.

В версии 5 библиотека полностью перешла на алгоритмическую систему тем, в которой итоговый внешний вид интерфейса формируется из:

Seed Tokens — базовых токенов (основные цвета, базовые параметры)
Map Tokens — производных значений, вычисляемых из базовых
Alias Tokens — токенов, применяемых конкретными компонентами

Такая архитектура обеспечивает:

централизованное управление стилями
автоматическое распространение изменений
возможность динамической смены темы
единый визуальный язык интерфейса

Design Tokens

Токены представляют собой объект конфигурации темы.

Пример базового токена:

const theme = {
  token: {
    colorPrimary: '#1677ff',
    borderRadius: 6,
    fontSize: 14
  }
}

Основные категории токенов:

Цветовые токены

Токен	Назначение
colorPrimary	основной цвет интерфейса
colorSuccess	цвет успешных действий
colorWarning	предупреждения
colorError	ошибки
colorInfo	информационные элементы
colorText	основной цвет текста
colorBgBase	базовый цвет фона

Типографика

Токен	Назначение
fontSize	базовый размер текста
fontFamily	основной шрифт
lineHeight	межстрочный интервал
fontWeightStrong	жирность для акцентов

Геометрия

Токен	Назначение
borderRadius	радиус скругления
sizeUnit	базовая единица размеров
padding	внутренние отступы
margin	внешние отступы

Тени

Токен	Назначение
boxShadow	стандартная тень
boxShadowSecondary	вторичная тень
boxShadowTertiary	минимальная тень

ConfigProvider — центр настройки темы

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

Пример базовой кастомной темы:

import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#722ed1',
          borderRadius: 8,
          fontSize: 15
        }
      }}
    >
      <MyApplication />
    </ConfigProvider>
  );
}

Изменение одного токена автоматически обновляет внешний вид всех компонентов.

Например:

кнопки
ссылки
активные элементы меню
чекбоксы
переключатели

Алгоритмы тем (Theme Algorithms)

Ant Design использует алгоритмы для генерации производных цветов.

Встроенные алгоритмы:

Алгоритм	Назначение
defaultAlgorithm	стандартная светлая тема
darkAlgorithm	тёмная тема
compactAlgorithm	компактный интерфейс

Использование алгоритма

import { ConfigProvider, theme } from 'antd';

const { darkAlgorithm } = theme;

<ConfigProvider
  theme={{
    algorithm: darkAlgorithm
  }}
>
  <App />
</ConfigProvider>

Алгоритм автоматически:

генерирует палитру оттенков
настраивает контраст
меняет цвета фона и текста
адаптирует компоненты

Комбинирование алгоритмов

Алгоритмы можно объединять.

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

<ConfigProvider
  theme={{
    algorithm: [darkAlgorithm, compactAlgorithm]
  }}
>
  <App />
</ConfigProvider>

Результат:

темная тема
уменьшенные отступы
более плотный интерфейс

Это особенно полезно для админ-панелей и панелей управления.

Переопределение токенов компонентов

Ant Design позволяет изменять токены для конкретных компонентов, не затрагивая остальную тему.

Пример:

<ConfigProvider
  theme={{
    components: {
      Button: {
        colorPrimary: '#ff4d4f',
        borderRadius: 20
      }
    }
  }}
>
  <App />
</ConfigProvider>

Изменения затронут только Button.

Возможности:

собственные цвета
радиусы
размеры
отступы

Пример кастомизации Button

<ConfigProvider
  theme={{
    components: {
      Button: {
        controlHeight: 48,
        fontWeight: 600,
        borderRadius: 12
      }
    }
  }}
>

Изменения:

увеличенная высота
более жирный текст
округлые кнопки

Использование токенов внутри компонентов

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

import { theme } from 'antd';

const { useToken } = theme;

function CustomComponent() {
  const { token } = useToken();

  return (
    <div style={{
      background: token.colorPrimary,
      padding: token.padding
    }}>
      Content
    </div>
  );
}

Преимущества:

синхронизация с темой
динамическое обновление
отсутствие жестко прописанных значений

Динамическая смена темы

Система тем поддерживает runtime-переключение.

Пример:

const [isDark, setIsDark] = useState(false);

<ConfigProvider
  theme={{
    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm
  }}
>

Переключение:

setIsDark(!isDark);

Интерфейс мгновенно обновляется без перезагрузки страницы.

Генерация цветовой палитры

Ant Design автоматически генерирует 10 оттенков основного цвета.

Например:

colorPrimary: #1677ff

Генерируются:

blue-1
blue-2
blue-3
...
blue-10

Использование:

hover
active
disabled
background
border

Это обеспечивает консистентность дизайна.

Создание собственной палитры

Можно вручную задать дополнительные цвета.

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#6a5acd',
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#ff4d4f'
    }
  }}
>

Эти значения используются:

в уведомлениях
алертах
формах
индикаторах статуса

Настройка радиусов

Радиусы влияют на визуальный стиль интерфейса.

Минимальный стиль

token: {
  borderRadius: 2
}

Современный стиль

token: {
  borderRadius: 12
}

Максимально округленный интерфейс

token: {
  borderRadius: 24
}

Изменение автоматически применяется к:

кнопкам
карточкам
инпутам
модальным окнам
dropdown

Кастомизация типографики

Шрифты также управляются через токены.

token: {
  fontFamily: 'Inter, sans-serif',
  fontSize: 16
}

Возможные параметры:

Токен	Назначение
fontFamily	основной шрифт
fontSize	базовый размер
lineHeight	высота строки
fontWeightStrong	жирный текст

Это влияет на:

текст кнопок
заголовки
формы
таблицы

Настройка фоновых цветов

Фон интерфейса настраивается через токены:

token: {
  colorBgBase: '#f5f7fa',
  colorBgContainer: '#ffffff'
}

Типы фонов:

Токен	Назначение
colorBgBase	общий фон страницы
colorBgContainer	фон компонентов
colorBgElevated	фон всплывающих элементов

Используется в:

карточках
меню
popover
dropdown

Глобальные и локальные темы

Ant Design поддерживает многоуровневую систему тем.

Глобальная тема

<ConfigProvider theme={globalTheme}>
  <App />
</ConfigProvider>

Локальная тема

<ConfigProvider theme={modalTheme}>
  <ModalComponent />
</ConfigProvider>

Внутренняя тема переопределяет внешнюю.

Это удобно для:

специальных страниц
маркетинговых блоков
административных панелей

Создание дизайн-системы на базе Ant Design

Кастомная тема может служить основой корпоративной дизайн-системы.

Типичный процесс:

Определение брендовых цветов
Создание токенов
Настройка типографики
Установка радиусов и теней
Переопределение компонентов

Пример структуры:

theme/
  tokens.js
  components.js
  algorithms.js
  index.js

tokens.js

export const tokens = {
  colorPrimary: '#0057ff',
  borderRadius: 10,
  fontFamily: 'Inter'
};

components.js

export const components = {
  Button: {
    borderRadius: 20
  },
  Card: {
    padding: 24
  }
};

index.js

export const theme = {
  token: tokens,
  components
};

Практический пример полной кастомной темы

const customTheme = {
  token: {
    colorPrimary: '#7c3aed',
    borderRadius: 10,
    fontFamily: 'Inter, sans-serif',
    fontSize: 15
  },

  components: {
    Button: {
      borderRadius: 30,
      controlHeight: 44
    },

    Card: {
      borderRadius: 16
    },

    Input: {
      borderRadius: 12
    }
  }
};

Подключение:

<ConfigProvider theme={customTheme}>
  <App />
</ConfigProvider>

Лучшие практики темизации

1. Использование токенов вместо жестких значений

Неправильно:

background: #1677ff

Правильно:

background: token.colorPrimary

2. Единая палитра

Количество основных цветов желательно ограничивать:

primary
success
warning
error
neutral

3. Контрастность

Цвета должны сохранять читаемость:

текст / фон
hover состояния
disabled состояния

4. Консистентность

Все компоненты должны использовать одни и те же токены.

5. Минимизация переопределений компонентов

Большинство изменений лучше делать на уровне глобальных токенов, чтобы:

сохранялась целостность дизайна
упрощалась поддержка
уменьшалось количество конфигурации

Преимущества кастомной темы

Создание собственной темы в Ant Design позволяет:

адаптировать библиотеку под бренд
поддерживать единый визуальный стиль
быстро изменять внешний вид интерфейса
масштабировать дизайн-систему
управлять стилями централизованно

Система дизайн-токенов и алгоритмов делает Ant Design одной из наиболее гибких UI-библиотек для построения сложных веб-интерфейсов.