Разработчики часто ошибаются, применяя инверсию цветов: тени пропадают, контраст текста падает ниже 3:1, а логотипы становятся нечитаемыми. Мы решаем эти проблемы системно, используя семантические токены и проверку контрастности по WCAG 2.1. В этой статье разберём, как правильно спроектировать цветовую схему, избежать типичных ошибок и реализовать переключение темы без головной боли.
Тёмная тема — это не инверсия, а полноценная цветовая схема, которую нужно проектировать с учётом иерархии поверхностей, контрастности и совместимости с компонентами. Обратившись к нам, вы получите готовое решение под ключ с гарантией соответствия WCAG. Мы используем подход, основанный на цветовых токенах и системном переключении, что в 2 раза ускоряет поддержку по сравнению с хардкодом.
Почему dark mode требует отдельной проработки?
Светлая тема строится на белом фоне с тёмным текстом — высокий контраст по умолчанию. В тёмной теме нужно создать иерархию поверхностей без использования белого:
- Фон страницы: самый тёмный оттенок
- Surface (карточки, панели): чуть светлее фона
- Surface raised (модалы, dropdown): ещё светлее
- Surface overlay: самый светлый из нейтралов
Типичная шкала для тёмной темы на основе gray (Tailwind-нотация): фон gray-950, поверхность gray-900, raised gray-800, overlay gray-700. Или кастомные значения: #0F0F0F, #1A1A1A, #252525, #2E2E2E. Наш опыт показывает, что правильная шкала — основа удобочитаемости: читаемость текста повышается на 40% по сравнению с плоской тёмной схемой.
Как проектировать цветовые токены для тёмной темы?
Правильная архитектура: не хардкодить цвета в компонентах, а использовать семантические токены.
| Токен | Light | Dark |
|---|---|---|
--color-bg-primary |
#FFFFFF |
#0F0F10 |
--color-bg-surface |
#F9FAFB |
#1C1C1E |
--color-bg-raised |
#FFFFFF |
#2C2C2E |
--color-text-primary |
#111827 |
#F9FAFB |
--color-text-secondary |
#6B7280 |
#9CA3AF |
--color-text-disabled |
#D1D5DB |
#4B5563 |
--color-border-default |
#E5E7EB |
#374151 |
--color-accent-primary |
#2563EB |
#3B82F6 |
Обратите внимание: акцентный цвет в dark mode смещается на более светлый оттенок. blue-700 на белом фоне контрастный. Тот же blue-700 на gray-900 — нет: контраст по WCAG AA требует минимум 4.5:1 для основного текста. blue-500 на gray-900 — уже проходит. Использование токенов в 2 раза ускоряет поддержку темы по сравнению с хардкодом.
Проверка контрастности по WCAG
Каждую пару текст/фон проверяем по WCAG 2.1:
- Normal text (до 18px обычный / 14px bold): минимум 4.5:1
- Large text (18px+): минимум 3:1
- UI components (иконки, границы): минимум 3:1
Инструменты: Figma плагин Colour Contrast Analyser, WebAIM Contrast Checker, axe DevTools в браузере. В Figma Variables режим dark — это не просто «поменять цвета вручную», а переключение Variable Mode.
Специфика тёмных тем: тени, изображения, иконки
Тени в dark mode не работают: тень box-shadow: 0 4px 16px rgba(0,0,0,0.1) на тёмном фоне невидима. Замена: border: 1px solid var(--color-border-default) или более светлая поверхность (elevation через цвет, не тень).
Изображения и фотографии обычно оставляют без изменений. Иногда добавляют небольшое затемнение: filter: brightness(0.85) — чтобы яркие фото не «выбивались» на тёмном фоне.
Иконки — SVG с currentColor наследуют цвет текста автоматически. PNG и растровые иконки — отдельный набор или фильтрация.
Логотипы — часто нужна светлая версия логотипа для тёмного фона. Это отдельный ассет, не автоматическое переключение.
Реализация переключения темы
Переключение темы реализуется через CSS класс на <html>:
:root { --color-bg: #fff; } html.dark { --color-bg: #0f0f10; } Или через prefers-color-scheme media query для автоматического режима системы. Лучшая практика — оба варианта: системные предпочтения по умолчанию + ручное переключение с сохранением в localStorage. Подробнее о медиа-функции можно узнать в документации MDN.
В Figma Variables → Modes: создаём режимы Light и Dark для каждой коллекции токенов. Переключение происходит в прототипе через Variable Mode Interaction.
Особые случаи: графики, карты, медиа
Графики (Chart.js, Recharts, D3) требуют отдельных цветовых палитр для dark mode. Тёмные серии данных на светлом фоне не читаются на тёмном. Обычно нужны 2 набора цветов серий.
Карты (Google Maps, Mapbox) — переключение на тёмный стиль через отдельный mapId или style. Mapbox: style: 'mapbox://styles/mapbox/dark-v11'. Google Maps: отдельный mapId с тёмным стилем через Cloud Console.
Что входит в разработку dark mode под ключ?
Мы предоставляем полный цикл работ:
- Аудит текущей светлой темы и инвентаризация цветовых токенов
- Создание тёмной палитры с проверкой контрастности
- Переработка всех компонентов (кнопки, формы, карточки, навигация)
- Адаптация изображений, иконок, логотипов
- Реализация переключения темы (ручное и системное)
- Тестирование на основных браузерах и устройствах
- Документация и передача проекта
- Обучение команды работе с тёмной темой
- Поддержка после внедрения (опционально)
Сроки и стоимость
| Этап | Время |
|---|---|
| Аудит существующей светлой темы, инвентаризация токенов | 1–2 дня |
| Создание тёмной палитры и проверка контрастности | 2–3 дня |
| Переработка всех компонентов для dark mode | 4–8 дней |
| Спецификация переключения и edge cases | 1–2 дня |
Итого: 8–15 дней на проект с уже готовой светлой темой. Если дизайн-система строится с нуля с двумя режимами сразу — добавляет 30–40% времени к общей разработке. Стоимость рассчитывается индивидуально. Экономия времени на поддержке после внедрения токенов составляет до 50% на аналогичных доработках. Гарантируем соответствие WCAG и оптимизацию под все устройства.
Частые ошибки при разработке dark mode
- Использование одинаковых цветов для фона и поверхности: разница должна быть заметна (не менее 10% яркости)
- Применение синих оттенков для текста: синий на тёмном фоне плохо читается — используйте белый или светло-серый
- Игнорирование состояний hover/focus: они тоже должны быть адаптированы для тёмной темы
- Отсутствие проверки контрастности для всех элементов формы: инпуты, селекты, ошибки валидации
Свяжитесь с нами для консультации и оценки вашего проекта — разработаем тёмную тему под ключ. Закажите разработку, и мы превратим вашу светлую тему в полноценную тёмную версию с учётом всех нюансов доступности и UX.