Коротко. Сделать сайт тёмным можно за 1–3 дня, если цвета вынесены в CSS-переменные: добавляется второй набор токенов, медиазапрос prefers-color-scheme и переключатель, который запоминает выбор в localStorage. Главные ошибки — чистый чёрный фон, тени вместо границ и вспышка светлой темы при загрузке. Бизнесу тёмная тема нужна там, где долго читают и работают: личные кабинеты, дашборды, IT- и премиум-аудитория; интернет-магазину с фотографиями товаров она чаще мешает.
Как работает тёмная тема технически
Системная тема
Браузер сообщает сайту, какой режим выбран в операционной системе, через медиазапрос prefers-color-scheme. Это самый дешёвый вариант: вы описываете второй набор цветов внутри @media (prefers-color-scheme: dark) — и пользователи с тёмной системой сразу видят тёмный сайт. Переключателя нет, кода минимум.
Ручной переключатель
Кнопка в шапке ставит атрибут data-theme=»dark» на корневой элемент и сохраняет выбор в localStorage. Правильная логика трёхсостояточная: «светлая», «тёмная» и «как в системе» по умолчанию. Ошибка новичков — описывать тёмные цвета только внутри медиазапроса: тогда ручной переключатель не сработает у человека со светлой системой.
Вспышка светлой темы при загрузке
Если тему применять из внешнего скрипта, страница успевает отрисоваться светлой и мигает. Лечится единственным способом: маленький синхронный скрипт в head, до отрисовки, читает localStorage и ставит атрибут на html. Это первое, что мы проверяем при приёмке тёмной темы.
Токены вместо конкретных цветов
Тёмная тема — это не «инвертировать всё». Работающий подход: цвета описываются ролями, а темы подменяют значения ролей. Тогда добавление второй темы стоит один вечер, а не переписывание всех стилей.
| Роль | Светлая тема | Тёмная тема |
|---|---|---|
| Фон страницы | #ffffff | #0e0f13 (не чистый чёрный) |
| Поверхность карточки | #f5f6f8 | #171922 |
| Основной текст | #14161c | #e6e9f0 (не чистый белый) |
| Вторичный текст | #5a6172 | #9aa3b5 |
| Граница | #e3e6ec | #262a36 |
| Акцент | #1e40af | #7aa2ff (осветлённый) |
Ключевой момент — акцентный цвет. Насыщенный синий, который отлично читается на белом, на тёмном фоне проваливается: его нужно осветлять, иначе кнопки и ссылки теряют контраст. То же касается служебных цветов: красный для ошибок и зелёный для успеха в тёмной теме берут более светлые оттенки, иначе подсказка под полем формы читается хуже самого поля.
Ролей в реальном проекте обычно 15–25: фон, две-три поверхности разной глубины, основной и вторичный текст, границы, акцент и его состояние при наведении, состояния ошибки, предупреждения и успеха, фон подсветки кода и цитат. Описанные один раз, они работают одинаково во всех блоках — и новая секция сайта автоматически получает корректный вид в обеих темах, без отдельной вёрстки под каждый режим.
Семь ошибок тёмной темы
- Чистый чёрный #000 и чистый белый текст. Максимальный контраст утомляет глаза и даёт эффект «свечения» букв. Берите почти-чёрный и почти-белый.
- Тени вместо границ. На тёмном фоне тень не видна. Иерархию задают более светлой поверхностью и тонкой границей.
- Непроверенный контраст. Норма — не ниже 4,5:1 для основного текста и 3:1 для крупных заголовков и элементов интерфейса.
- Логотипы в PNG на белой подложке. Нужна вторая версия логотипа или SVG с переменным цветом.
- Скриншоты и графики со светлым фоном. Белые прямоугольники в тёмном интерфейсе бьют по глазам; для схем делают вторую версию.
- Отключённые системные настройки. Если у человека тёмная система, а сайт всегда светлый — это тоже решение, но осознанное.
- Тёмная тема без проверки форм. Автозаполнение браузера подставляет собственный светлый фон в поля — это правится отдельно.
Что делать с картинками, письмами и печатью
Фотографии в тёмной теме выглядят контрастнее, чем задумано: имеет смысл слегка снизить яркость. Иллюстрации и иконки переводите в SVG, чтобы цвет наследовался из темы. Для документов и печати оставляйте светлую версию: тёмная страница на бумаге — это залитый тонером лист, поэтому в стилях печати тема принудительно возвращается к светлой.
Отдельная история — письма. Почтовые клиенты применяют собственную тёмную тему и иногда инвертируют цвета в шаблоне. Проверять рассылку нужно в тёмном режиме отдельно, иначе логотип пропадает на фоне.
Кому тёмная тема нужна, а кому вредит
Нужна: личным кабинетам и дашбордам, где человек проводит часы; сервисам для разработчиков и технической аудитории; медиа с длинными текстами; премиальным и студийным сайтам, где тёмная палитра — часть образа. Именно так сделан сайт нашего клиента arsenyev-studio.ru: тёмная тема там не опция, а основа айдентики.
Вредит: интернет-магазинам с фотографиями товаров на белом фоне, медицинским и детским тематикам, лендингам под контекстную рекламу, где важна максимальная читаемость с первой секунды. Если основной трафик приходит из Яндекс.Директа, любые эксперименты с палитрой проверяются сравнением конверсии, а не вкусом.
Сколько стоит и сколько занимает
- Сайт уже на CSS-переменных: 1–3 дня работы — второй набор токенов, переключатель, проверка контраста.
- Цвета зашиты в стилях: сначала рефакторинг в токены, дальше по обычной схеме. Обычно это неделя.
- Новый сайт: закладывайте тёмную тему на этапе дизайн-системы — тогда она почти не увеличивает бюджет.
- В рамках поддержки: от 10 000 ₽ в месяц, если сайт уже сопровождается, доработка встраивается в план работ.
Как мы проектируем интерфейсы и дизайн-системы — на странице разработки сайтов.
Частые вопросы
Как сделать сайт тёмным без переключателя?
Достаточно медиазапроса @media (prefers-color-scheme: dark) со вторым набором цветов. Сайт будет тёмным у тех, у кого тёмная система. Это минимальный вариант, который занимает несколько часов и не требует JavaScript.
Влияет ли тёмная тема на SEO?
Напрямую нет — поисковик оценивает контент, а не палитру. Косвенно влияет через поведение: если текст плохо читается, растут отказы. И ещё через скорость — лишний скрипт переключателя должен быть крошечным и синхронным, иначе портит показатели загрузки.
Экономит ли тёмная тема батарею?
На OLED-экранах — да, заметно, потому что чёрные пиксели не подсвечиваются. На обычных ЖК-экранах экономии практически нет. Как аргумент для бизнеса это второстепенно: решает удобство чтения, а не батарея.
Нужно ли делать два макета в дизайне?
Не два макета, а один макет и две палитры. Дизайнер описывает роли цветов и проверяет ключевые экраны в обоих режимах. Полный дубль макетов — лишняя работа, которая потом расходится между собой.
Как проверить, что тёмная тема сделана правильно?
Проверьте пять вещей: нет мигания при перезагрузке, выбор запоминается, контраст текста не ниже 4,5:1, поля форм и автозаполнение читаются, логотип и графики не пропадают на тёмном фоне.
Другие материалы по интерфейсам и разработке — в разделе «Разработка сайтов».
Нужна тёмная тема или редизайн интерфейса
Посмотрим текущий сайт, оценим объём работ по тёмной теме и заодно проверим скорость, читаемость и путь до заявки. Экспресс-аудит бесплатный.