Тёмная тема сайта: когда её делать, сколько стоит и почему инвертировать цвета нельзя
Тёмная тема полезна сервисам, кабинетам и медиа с долгими вечерними сессиями, но корпоративному сайту часто нужнее другие улучшения. Даём матрицу решения, стоимость и технический чек-лист.
Тёмная тема нужна не каждому сайту. Она особенно полезна продуктам, которыми долго пользуются вечером: сервисам, личным кабинетам, медиа и рабочим интерфейсам. Для небольшого корпоративного сайта это обычно улучшение восприятия, а не первая бизнес-задача.
Если бюджет ограничен, сначала исправьте скорость, мобильную версию, контраст и форму. Тёмную палитру имеет смысл проектировать после базовых проблем — или сразу вместе с новым дизайном, когда это стоит дешевле.
Кому тёмная тема действительно нужна
Ориентируйтесь на сценарий, а не на моду:
| Тип продукта | Приоритет | Почему |
|---|---|---|
| SaaS, кабинет, рабочая система | высокий | долгие сессии и частая ежедневная работа |
| Медиа, чтение, видео | высокий или средний | много вечернего использования и внимания к экрану |
| Интернет-магазин | средний | зависит от бренда, каталога и поведения аудитории |
| Корпоративный B2B-сайт | низкий или средний | визиты короткие; важнее предложение, скорость и доверие |
| Одноразовый лендинг | низкий | редко оправдывает отдельный бюджет |
Браузер передаёт системное предпочтение через prefers-color-scheme. Сайт может автоматически выбрать палитру, но решение о её разработке всё равно должно опираться на аудиторию и продукт.
Что даёт и чего не даёт
Начнём с главного: сама по себе тёмная тема не гарантирует рост конверсии.
Она может:
- убрать резкий светлый экран внутри тёмного окружения;
- экономить заряд на OLED-экранах, если используются действительно тёмные поверхности;
- учитывать системное предпочтение пользователя;
- поддержать фирменный характер продукта;
- помочь части людей с чувствительностью к яркому свету.
Она не исправит слабое предложение, неудобную форму, маленький шрифт или медленную загрузку. Это работа с комфортом и качеством системы, а не отдельный канал продаж.
Почему «просто инвертировать» не работает
Тёмная тема — вторая согласованная палитра, а не фильтр поверх светлой.
Чистый чёрный создаёт слишком жёсткий контраст. Часто комфортнее тёмно-серая поверхность. У ВЕРСТЫ основной тёмный фон — #0A0B0D.
Акцентные цвета меняют визуальный вес. Насыщенный цвет на тёмном фоне может казаться ярче и требовать отдельной настройки.
Тени перестают отделять уровни. Глубину приходится показывать разницей поверхностей и границ.
Логотипы и изображения могут светиться. Иллюстрациям, скриншотам и прозрачным файлам иногда нужны отдельные версии.
Состояния легко потерять. Hover, focus, disabled, ошибки и выбранные элементы должны оставаться различимыми в обеих темах.
Как это устроено технически
Есть три распространённых варианта.
Только системная тема. Сайт читает prefers-color-scheme и автоматически подстраивается. Реализация проще, но человек не может переопределить выбор.
Системная тема плюс переключатель. Сначала учитывается система, затем пользователь может выбрать вручную. Выбор запоминается. Так работает сайт ВЕРСТЫ.
Раздельные визуальные режимы. Кроме цветов меняются изображения, графика или плотность интерфейса. Это нужно реже и требует отдельного дизайна контента.
Надёжная реализация строится на дизайн-токенах или CSS-переменных: компоненты используют смысловые значения вроде --surface и --text, а тема меняет их в одном месте. Если цвет зашит непосредственно в десятках компонентов, добавление темы превращается в поиск исключений.
Что обязательно проверить
Тестируйте не только главную страницу:
- основной и вторичный текст;
- ссылки, кнопки и видимый фокус;
- поля, ошибки и автозаполнение браузера;
- логотипы, фотографии, графики и иконки;
- модальные окна, выпадающие меню и cookie-баннер;
- системный режим, ручной переключатель и первый кадр загрузки;
- контраст в обеих палитрах.
Важно избежать светлой вспышки до загрузки JavaScript. Начальную тему лучше определить в <head> до отрисовки страницы.
Сколько стоит
Если тёмная тема заложена вместе с дизайн-системой, основная работа — выбрать вторую палитру, проверить компоненты и подготовить варианты графики. На старте это обычно несколько дополнительных часов, а не отдельный проект.
На готовом сайте сначала нужно найти зашитые цвета, проверить все состояния, пересобрать графику и протестировать страницы. У ВЕРСТЫ такая задача относится к «дизайн-усилению» — ориентир 50 000 ₽ по прайсу, но точная оценка зависит от числа компонентов и изображений.
Как принять решение
Задайте три вопроса:
- Пользуются ли продуктом долго или вечером?
- Просит ли аудитория такую настройку или уже использует системную тему?
- Решены ли более важные проблемы: скорость, мобильная версия, доступность и конверсия?
Если первые два ответа «да», а базовые проблемы закрыты — тёмную тему стоит проектировать. Если нет, оставьте её в следующем этапе и не выдавайте декоративное улучшение за обязательную функцию.
Хотите понять объём на существующем сайте — пришлите ссылку. Посмотрим, есть ли дизайн-токены, сколько графики требует второй версии и что выгоднее: добавить тему сейчас или включить её в будущий редизайн.
