Идеальный Dark Mode: Гайд 2024
Техническое руководство по созданию темной темы, которая не утомляет глаза и соответствует стандартам WCAG 3.0.
Почему чистый черный — это ошибка
Использование #000000 в качестве фона для темных интерфейсов — это классическая ошибка, которая приводит к явлению "smearing" на OLED-экранах и вызывает чрезмерную нагрузку на зрительный нерв из-за резкого контраста с белым текстом.
В HueKit мы рекомендуем начинать темную тему с глубинного серого (например, #121212 или #1A1B1E). Это снижает контрастность фона до комфортных значений и позволяет акцентным цветам (primary, accent) работать как инструменты иерархии, а не просто как декор.
Пример токена
--bg-surface: #1A1B1E;
--bg-elevated: #242528;
--text-primary: #F0F0F0;
--text-secondary: #9E9EA7;
}
Избегайте чистого белого (#FFF) для основного текста. Используйте 87% яркости для снижения эффекта "сияния".
Баланс яркости и контраста
Главная проблема темных тем — потеря визуальной глубины. Когда фон темный, тени (box-shadow) перестают работать. Вместо теней нужно использовать повышение светлоты (elevation via lightness).
Правило HueKit: Каждый следующий уровень вложенности (карточка поверх фона, модальное окно поверх карточки) должен быть на 5-8% светлее предыдущего.
- L0 (Фон): 8% яркости
- L1 (Карточки): 12% яркости
- L2 (Модальные окна): 16% яркости
HueKit автоматически проверяет эти соотношения при экспорте в CSS/SCSS.
Инструменты HueKit для Dark Mode
Мы не просто генерируем цвета. Мы управляем состояниями. Вот как HueKit упрощает работу с темными темами в продакшене.
Dark Mode Generator
Загрузите свою светлую палитру. Алгоритм HueKit применит формулы HSL-инверсии, чтобы создать гармоничную темную версию, сохраняя вашу фирменную гамму.
Contrast Guard
Встроенный линтер, который блокирует коммит, если ваш новый темный токен имеет контраст ниже 4.5:1 на белом тексте. Никаких "серых букв" в сером фоне.
System Preference Sync
Генерация медиа-запросов @media (prefers-color-scheme: dark) в один клик. Автоматическая привязка токенов к системным настройкам ОС.
Начните с правильной палитры
Перестаньте подбирать оттенки темноты на глаз. Используйте HueKit для создания математически выверенных темных интерфейсов.
Попробуйте наш генератор тем бесплатно в течение 14 дней. Полная интеграция с React, Vue и Angular.
Попробовать бесплатноmode: 'auto',
dark: {
base: '#121212',
accent: '#5C8A76'
}
}