Содержание · 8
Почему чистый чёрный фон — плохая идея, как пересчитывать цвета и тени, что делать с изображениями и когда тёмная тема вообще не нужна.
Не чёрный и не белый
Чистый чёрный фон с чистым белым текстом даёт максимальный контраст — и вызывает эффект гало: светлые буквы «растекаются» на тёмном фоне, глаз быстро устаёт.
Рабочие значения: фон около #101010–#161616, основной текст около #EDEAE4 вместо чистого белого. Контраст остаётся высоким, а утомляемость заметно ниже.
Акценты нужно пересчитывать
Цвет, который отлично читался на светлом фоне, на тёмном обычно выглядит тускло и не проходит по контрасту. Насыщенные тёмные цвета — синий, бордовый, фиолетовый — требуют осветления на 15–25%.
Это означает, что тёмная тема — не переключение переменных, а вторая палитра с собственными значениями.
Глубина без теней
На тёмном фоне тени почти не читаются: чёрная тень на чёрном фоне невидима. Иерархию поверхностей строят светлотой — чем «выше» элемент, тем светлее его фон.
Отсюда правило: в тёмной теме карточка светлее фона, модальное окно светлее карточки, всплывающее меню светлее модального.
Изображения и логотипы
Фотографии на тёмном фоне выглядят ярче, чем на светлом, и часто требуют лёгкого приглушения — фильтр brightness около 0,9 решает это без переобработки исходников.
Логотипы и иллюстрации с прозрачным фоном требуют отдельной светлой версии: чёрный логотип на тёмном фоне просто исчезнет.
В тёмной теме глубину показывает не тень, а светлота. Всё, что в светлой поднималось тенью, здесь приходится поднимать цветом.
Когда тёмная тема не нужна
Она уместна там, где сайт читают долго и часто вечером: медиа, документация, инструменты. На коротком маркетинговом лендинге тёмная тема — это удвоение работы дизайнера ради эффекта, которого никто не заметит.
Отдельный аргумент против: длинные тексты на тёмном фоне читаются медленнее — это подтверждается исследованиями удобочитаемости.
Почему тёмная тема — это не инверсия
Прямая инверсия цветов даёт технически корректный и физически неприятный результат. Белый текст на чёрном фоне при яркой подсветке экрана вызывает ореол вокруг букв: светлые штрихи зрительно расплываются на тёмном сильнее, чем тёмные на светлом. Поэтому в тёмной теме берут не чистый чёрный и не чистый белый, а пару приглушённых тонов — тёмно-серый фон и светло-серый текст.
Меняется и роль теней. В светлой теме глубина показывается тенью, в тёмной тени не видно — её заменяет светлота: чем ближе поверхность к зрителю, тем она светлее. Это разная механика, и слой, поднятый в светлой теме тенью, в тёмной приходится поднимать цветом.
Что ломается при переключении
- Логотипы и знаки в один цвет: чёрная графика на тёмном фоне исчезает, нужен светлый вариант.
- Скриншоты интерфейсов: они остаются светлыми пятнами и выбиваются из полосы.
- Насыщенные акценты: на тёмном они выглядят ярче и часто требуют отдельных, приглушённых значений.
- Градиенты и полупрозрачность: подобранные на светлом, на тёмном они дают грязь.
- Тонкие начертания: на тёмном фоне светлый тонкий штрих истончается ещё сильнее и теряет читаемость.
Что в итоге
Тёмная тема — это вторая палитра, а не инверсия: другие значения фона, текста, акцентов и своя логика глубины.
Делайте её там, где сайт читают подолгу, и всегда оставляйте пользователю выбор.
Коротко
- Можно ли просто инвертировать цвета?
- Нет. Чистый белый текст на чистом чёрном даёт избыточный контраст и зрительное дрожание букв; берут светло-серый на тёмно-сером и заново подбирают акценты — на тёмном фоне они выглядят ярче.
- Как быть с изображениями в тёмной теме?
- Фотографии оставляют как есть, а графике с прозрачностью нужна вторая версия: чёрные линии на тёмном фоне исчезают. Логотипы почти всегда требуют отдельного светлого варианта.
Структура лендинга
Первый экран, доказательства, возражения, действие. Разбираем логику посадочной страницы как аргументацию, а не как набор модных блоков.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…