Темная тема

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

Начиная с Ant Design 5, механизм тем реализован через алгоритмы темы (theme algorithms), которые автоматически преобразуют базовые токены в набор значений для компонентов интерфейса.

Основные уровни системы тем:

Seed tokens (базовые токены) Исходные параметры дизайна, например:

  • основной цвет
  • базовый радиус скругления
  • базовый размер шрифта

Map tokens Токены, получаемые на основе базовых значений через алгоритмы темы.

Component tokens Финальные параметры, применяемые конкретными компонентами интерфейса.

Темная тема создаётся при помощи специального алгоритма darkAlgorithm.

Принципы построения темной темы

Темная тема — это не простая инверсия цветов. В Ant Design используются несколько принципов:

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

Элементы интерфейса должны сохранять читаемость и различимость.

Пример распределения:

Элемент Цвет
Основной фон почти черный
Карточки немного светлее
Hover-состояния ещё светлее

Это создаёт слоистую иерархию интерфейса.

Цветовая иерархия

В темной теме используется несколько уровней фона:

  • основной фон страницы
  • фон контейнеров
  • фон интерактивных элементов
  • фон hover-состояний

Это позволяет визуально разделять блоки.

Снижение яркости акцентных цветов

Светлые и насыщенные цвета в темной теме могут выглядеть слишком агрессивно. Поэтому Ant Design автоматически модифицирует палитру.

Например:

primaryColor → более мягкий оттенок

Алгоритм темной темы корректирует:

  • насыщенность
  • яркость
  • контраст

Подключение темной темы

Темная тема подключается через компонент ConfigProvider.

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

import { ConfigProvider, theme } from 'antd';

const { darkAlgorithm } = theme;

function App() {
  return (
    <ConfigProvider
      theme={{
        algorithm: darkAlgorithm
      }}
    >
      <MyApp />
    </ConfigProvider>
  );
}

В данном случае:

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

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

Ant Design позволяет комбинировать алгоритмы тем.

Например:

import { theme } from 'antd';

const { darkAlgorithm, compactAlgorithm } = theme;

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

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

Результат:

  • темная тема
  • компактные размеры компонентов

Это удобно для админ-панелей и аналитических систем.

Настройка токенов в темной теме

Даже при использовании darkAlgorithm можно переопределять токены.

Пример:

<ConfigProvider
  theme={{
    algorithm: theme.darkAlgorithm,
    token: {
      colorPrimary: '#722ed1',
      borderRadius: 6
    }
  }}
>

Изменённые параметры:

  • основной цвет
  • радиус скругления

Алгоритм темной темы автоматически пересчитает производные цвета.

Ключевые токены темной темы

Наиболее важные токены:

Цвета фона

colorBgBase
colorBgContainer
colorBgElevated

Назначение:

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

Цвета текста

colorText
colorTextSecondary
colorTextTertiary
colorTextDisabled

Различные уровни контрастности позволяют выстраивать иерархию информации.

Цвета границ

colorBorder
colorBorderSecondary

В темной теме границы часто более мягкие и менее контрастные.

Акцентные цвета

colorPrimary
colorSuccess
colorWarning
colorError
colorInfo

Алгоритм темной темы корректирует их яркость.

Глобальное переключение темы

Часто требуется переключение между светлой и темной темой.

Пример реализации:

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

function App() {
  const [dark, setDark] = useState(false);

  return (
    <ConfigProvider
      theme={{
        algorithm: dark
          ? theme.darkAlgorithm
          : theme.defaultAlgorithm
      }}
    >
      <MyApp toggleTheme={() => setDark(!dark)} />
    </ConfigProvider>
  );
}

Теперь приложение поддерживает динамическое переключение темы.

Переключатель темы

Пример интерфейсного элемента:

import { Switch } from 'antd';

<Switch
  checked={dark}
  onCha nge={(checked) => setDark(checked)}
  checkedChildren="Dark"
  unCheckedChildren="Light"
/>

Такой переключатель часто размещается:

  • в header приложения
  • в пользовательских настройках
  • в панели профиля

Использование CSS-переменных

Ant Design v5 использует CSS variables, что значительно ускоряет переключение темы.

При смене темы:

  • пересчитываются токены
  • обновляются CSS-переменные
  • компоненты перерисовываются без полной перезагрузки страницы

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

  • мгновенное переключение
  • отсутствие перегенерации CSS
  • высокая производительность

Темная тема и кастомные компоненты

Если используются собственные компоненты, желательно также опираться на токены Ant Design.

Пример:

import { theme } from 'antd';

const { useToken } = theme;

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

  return (
    <div
      style={{
        background: token.colorBgContainer,
        color: token.colorText,
        padding: 16,
        borderRadius: token.borderRadius
      }}
    >
      Content
    </div>
  );
}

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

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

Темная тема для Layout

Компонент Layout часто используется в админ-панелях.

Для темной темы обычно используется:

  • темный Sider
  • темный header
  • светлый или темный контент

Пример:

import { Layout } from 'antd';

const { Header, Sider, Content } = Layout;

<Layout>
  <Sider theme="dark">
    Menu
  </Sider>

  <Layout>
    <Header style={{ background: '#141414' }}>
      Header
    </Header>

    <Content>
      Content
    </Content>
  </Layout>
</Layout>

Настройка меню для темной темы

Компонент Menu имеет собственное свойство темы.

theme="dark"

Пример:

import { Menu } from 'antd';

<Menu
  theme="dark"
  mode="inline"
  items={items}
/>

Особенности:

  • контрастный текст
  • подсветка активных пунктов
  • изменённые hover-цвета

Оптимальные цвета для темной темы

При кастомизации рекомендуется избегать:

  • чистого черного (#000000)
  • чистого белого (#FFFFFF)

Ant Design использует более мягкие оттенки:

#141414
#1f1f1f
#262626

Это снижает нагрузку на глаза.

Темная тема и графики

Если используются библиотеки визуализации (например, Chart.js или ECharts), необходимо синхронизировать их цвета с токенами Ant Design.

Пример:

const { token } = theme.useToken();

const chartOptions = {
  backgroundColor: token.colorBgContainer,
  textStyle: {
    color: token.colorText
  }
};

Таким образом:

  • графики адаптируются к теме
  • сохраняется единый стиль интерфейса

Производительность темной темы

Ant Design оптимизирует работу тем за счёт:

  • CSS variables
  • memoization токенов
  • частичной перерисовки компонентов

В результате:

  • переключение темы происходит мгновенно
  • нет значительной нагрузки на React-рендеринг
  • отсутствуют мерцания интерфейса

Распространенные ошибки

Жёстко заданные цвета

Плохо:

color: #000;
background: #fff;

Такие стили ломают темную тему.

Лучше использовать токены.

Использование inline-цветов

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

style={{ background: '#fff' }}

Правильно:

style={{ background: token.colorBgContainer }}

Игнорирование контраста

В темной теме особенно важно проверять:

  • читаемость текста
  • различимость границ
  • hover-состояния

Архитектура тем в больших приложениях

В крупных проектах рекомендуется:

1. Центральный конфиг темы

theme/
  tokens.js
  algorithms.js

2. Обёртка ThemeProvider

<ThemeProvider>
  <App />
</ThemeProvider>

3. Использование useToken во всех компонентах

Это обеспечивает:

  • единый стиль
  • поддержку нескольких тем
  • простое масштабирование интерфейса

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

Ant Design позволяет создавать собственные темы.

Пример:

const customDarkTheme = {
  algorithm: theme.darkAlgorithm,
  token: {
    colorPrimary: '#00b96b'
  }
};

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

<ConfigProvider theme={customDarkTheme}>

Таким образом можно реализовать:

  • стандартную темную тему
  • брендированную темную тему
  • корпоративную тему продукта.
Оглавление