Тёмный базовый шаблон — 125 готовых цветовых схем для antd

30 авг 2026
2,212
705
19
2 недели

Знакомо? Дизайнер приносит макет, а вся ваша темизация Ant Design сводится к копанию в конфиге и ручному подбору оттенков. Есть решение попроще.

Встречайте Ant Design DarkTheme — репозиторий с 125 готовыми JSON-файлами тёмных тем. Каждая — отдельная цветовая схема в формате, который Ant Design 5.x принимает из коробки через theme.defaultConfig / ConfigProvider. Никаких зависимостей, никакого额外的 кода. Скачали JSON, подключили, получили готовую тёмную тему.

Что внутри

Каждый файл — это строка JSON с полным набором цветовых токенов: primary, background, текст, состояния, бордеры и производные оттенки. Формат совместим с antd 5.x из коробки:

import { ConfigProvider, theme } from 'antd';
import darkTheme from './themes/antd.dark.theme.react-admin.json';

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

Репозиторий не привязан к конкретному стеку — есть версии для React, Vue и Angular.

Зачем это нужно

Причины присмотреться:

Реклама
  • 125 вариантов — от Office и macOS-подобных до High Contrast и Material Design 3
  • Структура токенов следует рекомендациям antd team (Seed Map → Map Algorithm → Alias Token)
  • Файлы JSON весом ~1-2 КБ — никакой нагрузки на бандл
  • MIT-лицензия — можно использовать в коммерческих проектах

Кому подойдёт

Тем, кто строит админ-панели и дашборды на Ant Design и хочет быстро добавить поддержку тёмной темы. Особенно если под рукой дизайнера нет, а писать токены с нуля не хочется.

Загляните в репозиторий ant-design-dark-theme, возможно, нужная схема уже готова.

🍪 Мы используем файлы cookie и сервис аналитики Яндекс.Метрика, чтобы сайт работал лучше. Продолжая пользоваться devtrends.ru, вы соглашаетесь с обработкой данных согласно Политике конфиденциальности.