Изменение цветовой палитры

Ant Design предоставляет гибкую систему управления темами, которая позволяет изменять цвета компонентов без необходимости переписывать стили вручную. В основе лежит использование LESS-переменных, которые определяют основные цветовые параметры интерфейса.

Настройка темы через LESS

Каждый компонент Ant Design использует набор переменных, которые можно переопределять. Основные переменные, влияющие на палитру:

  • @primary-color — основной цвет приложения.
  • @link-color — цвет ссылок.
  • @success-color, @warning-color, @error-color — цвета для различных состояний.
  • @font-size-base — базовый размер шрифта (влияет на визуальное восприятие цветов).
  • @border-radius-base — радиус скругления элементов (визуально влияет на яркость компонентов).

Для изменения палитры необходимо создать файл theme.less и переопределить нужные переменные:

@primary-color: #1DA57A; // новый основной цвет
@link-color: #1890ff; // цвет ссылок
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;

Затем подключить этот файл через конфигурацию сборщика (например, Webpack) с использованием less-loader:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  'primary-color': '#1DA57A',
                  'link-color': '#1890ff',
                  'success-color': '#52c41a',
                  'warning-color': '#faad14',
                  'error-color': '#f5222d',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

Динамическая смена темы в приложении

Ant Design поддерживает динамическое изменение цвета без перезагрузки страницы через библиотеку @ant-design/colors и функцию генерации новых палитр.

  1. Установка зависимостей:
npm install @ant-design/colors
  1. Генерация цветовых оттенков:
import { generate } from '@ant-design/colors';

const newPrimary = '#722ed1';
const palette = generate(newPrimary); // возвращает массив оттенков
console.log(palette);
  1. Подключение новой палитры через CSS-переменные:
const root = document.documentElement;

palette.forEach((color, index) => {
  root.style.setProperty(`--primary-${index + 1}`, color);
});

После этого компоненты, использующие CSS-переменные, автоматически обновят свой цвет.

Использование ConfigProvider для глобальных настроек

Компонент ConfigProvider позволяет централизованно управлять темой и локализацией. Для изменения палитры достаточно передать объект theme:

import { ConfigProvider, Button } from 'antd';

const App = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#13c2c2',
        colorSuccess: '#52c41a',
        colorWarning: '#faad14',
        colorError: '#f5222d',
      },
    }}
  >
    <Button type="primary">Нажми меня</Button>
  </ConfigProvider>
);

Ключевые моменты:

  • token.colorPrimary — основной цвет.
  • token.colorSuccess, token.colorWarning, token.colorError — цвета для состояний.
  • Любые изменения через ConfigProvider применяются моментально ко всем вложенным компонентам.

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

Ant Design поддерживает светлую и темную темы из коробки. Для перехода между ними используется свойство algorithm:

import { theme } from 'antd';

const { defaultAlgorithm, darkAlgorithm } = theme;

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

Можно комбинировать с пользовательскими цветами, чтобы создать уникальную темную тему:

<ConfigProvider
  theme={{
    algorithm: darkAlgorithm,
    token: {
      colorPrimary: '#ff4d4f',
    },
  }}
>
  <App />
</ConfigProvider>

Советы по гармонизации палитры

  1. Использовать основной цвет для акцентов: кнопки, ссылки, иконки.
  2. Сохранять контрастность: для текста и фона применять цвета с достаточной разницей яркости.
  3. Ограничить количество дополнительных цветов: до 3–4 оттенков, чтобы интерфейс оставался единообразным.
  4. Тестировать на различных устройствах: цвета могут выглядеть по-разному на OLED и LCD экранах.

Инструменты для генерации палитры

  • @ant-design/colors — создание оттенков основного цвета.
  • Онлайн-сервисы Ant Design: Ant Design Color Tool для проверки сочетаемости.
  • LESS-функции darken и lighten для ручной корректировки оттенков.

Применение в компонентах

Каждый компонент Ant Design использует токены из темы. Примеры:

  • Кнопка
<Button type="primary">Primary</Button>

Цвет кнопки берется из colorPrimary.

  • Badge
<Badge status="error" text="Ошибка" />

Цвет статуса соответствует colorError.

  • Input и Form
<Input placeholder="Введите текст" />

Границы и фокус используют colorPrimary.

Эта система позволяет быстро изменять визуальный стиль всего приложения через централизованное управление палитрой.

Оглавление