Статья
Тёмная тема сайта: когда она уместна и как сделать
Тёмный сайт выглядит эффектно: фото и продукт на нём смотрятся дороже, а интерфейс — современнее. Но тёмный фон подходит не каждому бизнесу и требует аккуратности с текстом и контрастом. Разбираем, когда тёмная тема уместна, как сделать её удобной и нужен ли сайту переключатель темы.
Когда тёмная тема уместна
| Подходит тёмная | Лучше светлая |
|---|---|
| Портфолио, фото, видео, дизайн | Много текста: статьи, документы, условия |
| Технологии, премиальные товары, вечерние заведения | Медицина, юристы, услуги, где важны спокойствие и доверие |
| Короткая презентация, яркий первый экран | Каталог с сотнями позиций |
Тренды здесь не главное: тёмная тема должна подходить вашим клиентам и продукту. Подробнее о том, как отличить тренд от моды, — в статье «Тренды веб-дизайна 2026».
Как сделать её удобной
- Не чистый чёрный и не чистый белый. Тёмно-серый фон и чуть приглушённый белый текст меньше режут глаза.
- Контраст — не ниже 4,5:1 для обычного текста. Серый текст на тёмно-сером фоне выглядит стильно на макете и нечитаемо на телефоне.
- Шрифт поплотнее. Тонкие начертания на тёмном фоне кажутся ещё тоньше, а межстрочный интервал стоит сделать чуть больше — о размерах и интервалах статья «Типографика на сайте».
- Акценты — экономно. Яркий цвет на тёмном фоне притягивает взгляд сильнее, чем на светлом.
- Логотип и картинки. Нужна версия логотипа для тёмного фона, а картинки на белом фоне превращаются в светлые «дыры».
О палитре и контрасте подробно — в статье «Цвета для сайта».
Переключатель темы
- Браузер подсказывает, какую тему человек выбрал в системе, и сайт может подстроиться под неё автоматически.
- Переключатель нужен, если на сайте много текста, к которому возвращаются: личный кабинет, документация, большой блог. Лендингу обычно хватает одной продуманной темы.
- Технически цвета задают переменными: светлая и тёмная палитры, и сайт подставляет нужную по настройке системы или по кнопке.
- Проверяйте обе темы: формы, ошибки, таблицы и графики часто ломаются именно в той, что делали второй.
Частые ошибки
- Длинные тексты белым по чёрному — глаза устают уже на втором экране.
- Поля формы, которые сливаются с фоном.
- Тёмные края логотипа и фото, которые пропадают на тёмном фоне.
- Тёмная тема «для красоты» там, где клиентам важны спокойствие и доверие.
Как устроено у нас
Наш сайт в основном тёмный: тёмный фон и тёплый белый текст. Но статьи блога и документы набраны на светлом «бумажном» фоне — длинный текст так читать легче.
Собственный дизайн мы делаем без шаблонов — для компьютера и отдельно для телефона, а макет показываем и правим до начала вёрстки.