Настройка глобальной темы

В Ant Design тема настраивается через ConfigProvider и систему токенов. Для глобальной настройки необходимо импортировать ConfigProvider из пакета antd и обернуть им корневой компонент приложения. Это позволяет задать глобальные параметры, такие как цвета, тип шрифтов, размеры компонентов и другие токены, которые будут распространяться на все элементы интерфейса.

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

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, Button } from 'antd';

const App = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1890ff', // основной цвет
        borderRadius: 6,         // радиус скругления кнопок и карточек
        fontSize: 14             // базовый размер шрифта
      },
    }}
  >
    <Button type="primary">Кнопка</Button>
  </ConfigProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Здесь token — объект, который содержит ключевые переменные темы. Любое изменение этих значений будет применяться ко всем компонентам библиотеки.

Основные токены темы

Ant Design использует большое количество токенов, которые делятся на группы:

  • Цветовые токены: colorPrimary, colorSuccess, colorWarning, colorError, colorInfo.
  • Размеры: borderRadius, controlHeight, fontSize.
  • Типографика: fontFamily, lineHeight, headingColor, textColor.
  • Интерактивные состояния: colorPrimaryHover, colorPrimaryActive, colorPrimaryDisabled.

Пример расширенной настройки цвета:

theme={{
  token: {
    colorPrimary: '#722ed1',
    colorPrimaryHover: '#9254de',
    colorPrimaryActive: '#531dab',
    colorText: '#333333',
    colorBorder: '#d9d9d9',
  }
}}

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

Тёмная и светлая темы

Ant Design поддерживает переключение между светлой и тёмной темой через ключ algorithm. Для глобального применения тем используется пакет antd/dist/theme:

import { ConfigProvider, theme } from 'antd';

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

Для комбинирования пользовательских токенов с тёмной или светлой темой можно передавать объект token вместе с algorithm:

<ConfigProvider
  theme={{
    algorithm: theme.darkAlgorithm,
    token: { colorPrimary: '#13c2c2', borderRadius: 8 }
  }}
>
  <App />
</ConfigProvider>

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

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

Для динамического изменения темы на лету используется ConfigProvider с состоянием React:

import React, { useState } from 'react';
import { ConfigProvider, Button, theme } from 'antd';

const DynamicThemeApp = () => {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <ConfigProvider theme={{
      algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
      token: { colorPrimary: darkMode ? '#722ed1' : '#1890ff' }
    }}>
      <Button type="primary" onCl ick={() => setDarkMode(!darkMode)}>
        Переключить тему
      </Button>
    </ConfigProvider>
  );
};

Таким образом, можно реализовать переключатель светлой и тёмной темы без перезагрузки страницы.

Пользовательские алгоритмы и расширенные токены

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

import { theme } from 'antd';

const customAlgorithm = (token) => ({
  ...token,
  colorPrimary: '#fa541c',
  colorPrimaryHover: '#ff7a45',
  borderRadius: 10,
});

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

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

Наследование и локальная переопределение

Токены, заданные в ConfigProvider, наследуются всеми дочерними компонентами. При необходимости локально переопределить тему для отдельного блока используется вложенный ConfigProvider:

<ConfigProvider theme={{ token: { colorPrimary: '#1890ff' } }}>
  <Button>Основная кнопка</Button>
  <ConfigProvider theme={{ token: { colorPrimary: '#f5222d' } }}>
    <Button>Красная кнопка</Button>
  </ConfigProvider>
</ConfigProvider>

Вложенный ConfigProvider изменяет тему только для своих дочерних компонентов, не затрагивая остальные элементы приложения.

Итоговая структура глобальной темы

  1. ConfigProvider на уровне корня — задаёт базовую тему приложения.
  2. Токены (token) — ключевые переменные для управления цветами, размерами, шрифтами и состояниями компонентов.
  3. Алгоритмы (algorithm) — определяют стиль светлой или тёмной темы, могут быть кастомными.
  4. Локальные ConfigProvider — позволяют изменять тему для отдельных секций без глобального эффекта.
  5. Динамическая смена — через состояние React и обновление пропсов ConfigProvider.

Эта структура обеспечивает гибкость, поддержку корпоративного дизайна и единообразие интерфейса на уровне всего приложения.

Оглавление