+7 383 380-81-89
21 августа 2026
Тёмная тема перестала быть модой и стала ожиданием. Люди привыкли к ней в телефоне, в мессенджерах, в редакторах кода — и удивляются, когда сайт слепит белым в одиннадцать вечера.
Но тёмный сайт — это не «взять светлый и поменять фон на чёрный». Так получается нечитаемо: буквы расплываются, цвета вибрируют, а через минуту глаза устают больше, чем от обычного белого фона. Ниже разберём, где тёмная тема на месте, где мешает, и как сделать её так, чтобы она выглядела дорого, а не мрачно.
Коротко
- Тёмная тема работает для портфолио, панелей управления и всего, что смотрят вечером — и мешает на длинных текстах, в финансах и в каталогах с чужими фотографиями на белом фоне.
- Простая инверсия цветов не работает: фон должен быть не чёрным, а текст — не белым.
- Глубину в тёмном интерфейсе показывает свет, а не тень: чем ближе элемент к пользователю, тем он светлее.
- Контраст нужно проверять числом, а не глазом — это требование доступности WCAG, а не вкусовщина.
- Почти половина людей живёт с той или иной формой астигматизма, и у них яркий текст на тёмном фоне буквально расплывается — это называется эффектом гало.
В этой статье
Где тёмная тема на своём месте
Портфолио и работы. Тёмный фон убирает себя из кадра. Фотография, иллюстрация или макет на нём выглядят ярче, потому что глазу не с чем конкурировать. Это же правило работает в музеях: картины вешают на тёмные стены не случайно.
Продукты и панели управления. Если человек проводит в интерфейсе несколько часов подряд, тёмный фон снижает утомление глаз в тёмном помещении. Плюс на тёмном лучше читаются графики и подсветка состояний: зелёное, жёлтое и красное видно сразу, без слепящего белого вокруг.
Всё, что смотрят вечером и с телефона. Развлекательные сервисы, кино, музыка, чтение перед сном. Здесь тёмная тема — просто вежливость по отношению к чужим глазам в темноте.
Технологические компании. Тёмное оформление читается как «мы про технику». Это уже клише, но клише работающее: оно быстро сообщает, куда человек попал, ещё до того, как он прочитал заголовок.
Где тёмная тема вредит
Длинные тексты. Светлые буквы на тёмном фоне читать тяжелее: буквы визуально «растекаются» по фону, и глаз быстрее устаёт. Если у вас статьи на десять минут чтения, тёмная тема как единственный вариант съест дочитывания.
Сайты, где нужно доверие к деньгам. Банки, страхование, медицина. Тёмное оформление здесь читается как что-то нишевое и небезопасное — не потому, что это правда, а потому, что люди привыкли к светлому в этих сферах.
Каталоги товаров с чужими фотографиями. Товарные снимки почти всегда сняты на белом фоне. На тёмном фоне у каждой карточки появится светлый прямоугольник, и сетка каталога будет выглядеть рваной, а не аккуратной.
Аудитория старше сорока пяти — пятидесяти лет. С возрастом хрусталик рассеивает свет сильнее, и светлый текст на тёмном фоне даёт заметный ореол вокруг букв. Если ваши клиенты — люди старшего возраста, тёмная тема как единственный вариант оформления — плохая идея.
Свести это в одну таблицу проще, чем держать в голове список из восьми пунктов.
| Тип сайта | Тёмная тема | Почему |
|---|---|---|
| Портфолио, фотография, дизайн-студия | Работает | Фон не спорит с работами, а подчёркивает их |
| Панель управления, личный кабинет, сервис для работы | Работает | Меньше усталости при долгой работе, лучше видна подсветка состояний |
| Кино, музыка, чтение, игры | Работает | Смотрят вечером, часто на телефоне в темноте |
| Технологический стартап, IT-услуги | Работает как акцент | Считывается как «про технику» с первого взгляда |
| Блог с длинными статьями | Мешает как единственный вариант | Светлый текст на тёмном фоне утомляет за 5–10 минут чтения |
| Банк, страхование, медицина | Мешает | Аудитория считывает тёмное оформление как менее надёжное |
| Каталог товаров с чужими фото на белом | Мешает | Светлые прямоугольники карточек ломают сетку |
| Сайт для аудитории 45+ | Мешает как единственный вариант | Ореол вокруг светлого текста мешает читать сильнее, чем молодым |
Если сомневаетесь. Тёмная тема почти никогда не бывает единственно верным решением для всего сайта. Чаще правильный ответ — тёмная тема как опция, а не как замена светлой версии.
Шесть правил хорошей тёмной темы
1. Фон не чёрный
Чистый чёрный даёт слишком резкий контраст с белым текстом — от этого рябит и режет глаза. Берите очень тёмный серый или тёмный с лёгким оттенком: синеватым, зеленоватым, фиолетовым.
Оттенок в фоне — то, что отличает продуманную тёмную тему от вывернутой наизнанку светлой.
2. Текст не белый
По той же причине. Основной текст лучше делать светло-серым, а чистый белый оставить для заголовков и того, на что надо посмотреть в первую очередь.
Так появляется иерархия: глаз сам понимает, что здесь главное, а что — второстепенный текст рядом.
3. Глубина показывается светом, а не тенью
На светлом сайте карточка отделяется от фона тенью. На тёмном тень не видна — она просто теряется в темноте. Работает наоборот: чем ближе элемент к пользователю, тем светлее его поверхность.
Всплывающее окно светлее карточки, карточка светлее фона. Это единственный способ показать слои интерфейса, не рисуя рамки вокруг каждого блока.
4. Цвета приглушить
Яркие насыщенные цвета, которые прекрасно выглядят на белом, на тёмном начинают вибрировать и выжигать глаза. Особенно чистый синий и чистый красный.
Тот же цвет надо взять светлее и менее насыщенным. Это отдельная работа: набор цветов для тёмной темы не получается из светлого автоматически, простой инверсией.
5. Проверить контраст, а не поверить глазу
В тёмной теме легко сделать красиво и нечитаемо: серый текст на сером фоне выглядит стильно на большом мониторе дизайнера и пропадает на телефоне под солнцем.
Есть бесплатные проверялки контраста, они дают число, а не мнение.
Источник: Bureau of Internet Accessibility, 2021
Для крупных заголовков порог мягче — не ниже 3 к 1. Это то же требование доступности, и одновременно простая забота о читателе, у которого может не быть идеального зрения.
Осторожно. Если часть аудитории — люди старше сорока пяти или с нарушениями зрения, эффект гало для них не эстетическая деталь, а причина закрыть вкладку. Проверяйте контраст числом на реальном экране, а не по тому, как палитра выглядит в макете дизайнера.
6. Дать выбор и запомнить его
Лучшее решение — не выбирать за человека. Браузер сообщает сайту, какая тема стоит в системе, и сайт может открыться сразу правильным вариантом.
Плюс переключатель на видном месте и запоминание выбора. Человек, который один раз переключился на светлую тему, не должен делать это заново на каждой странице.
Частая ошибка: забыть про всё остальное
Тёмную тему обычно делают для главной и внутренних страниц, а потом обнаруживают, что забыли:
- формы — поля ввода остаются белыми и светят как фары;
- картинки с прозрачностью — чёрный логотип на чёрном фоне исчезает;
- таблицы и графики — цвета линий подобраны под белый фон и пропадают на тёмном;
- письма, которые сайт отправляет — они открываются в почте со своим оформлением, не сайтовым;
- страницы ошибок и служебные экраны — про них вспоминают последними, а находят их пользователи первыми.
Проще всего это ловится списком: пройти все страницы сайта в тёмной теме подряд, в том числе те, куда обычно не заходят — страницу 404, письмо с подтверждением заказа, экран загрузки.
Забыли
- Белые поля форм на тёмном фоне
- Прозрачный логотип, который исчезает
- Письма и уведомления в светлой вёрстке
- Страницу 404 и технические ошибки
Проверили
- Формы, таблицы, графики и подсказки
- Логотип в двух версиях — для тёмного и светлого фона
- Шаблоны писем адаптированы отдельно
- Служебные страницы пройдены вручную
Четыре реальные тёмные палитры
Дальше — не абстрактный совет, а точные цвета из сервисов, которые вы наверняка открывали сегодня. Можно взять эти номера цветов (hex-коды) за отправную точку для своей палитры.
| Где применяется | Фон | Поверхность | Акцент | Контраст текста и фона |
|---|---|---|---|---|
| Spotify | #121212 | #282828 | #1DB954 — только на кнопке play и активных элементах | 18,7 к 1 (белый текст) |
| Netflix | #141414 | карточки темнее фона, не светлее — редкое сознательное исключение | #E50914 — только в логотипе и кнопке «Смотреть» | 18,4 к 1 (белый текст) |
| Правило Material Design (руководство Google) | #121212, не #000000 | каждый следующий слой светлее предыдущего | — | от 18,7 к 1 на фоне до 11,7 к 1 на самом светлом слое (белый текст) — везде выше нормы 4,5 к 1 |
Контраст в таблице посчитан по формуле WCAG для белого текста на указанном фоне — у всех трёх с большим запасом выше минимума 4,5 к 1. У Netflix карточки специально темнее фона, а не светлее, как советует правило №3 — там на первом месте фотография, а не иерархия панелей, и это осознанное исключение, а не ошибка.
Источники цветов: официальные гайды Spotify, бренд-портал Netflix, руководство Google по тёмной теме Material Design. Похожий приём есть и у X (бывший Twitter): в настройках можно выбрать между тёмно-синим фоном #15202B и полностью чёрным #000000 — у обоих контраст с белым текстом заметно выше минимума, 16,5 к 1 и 21 к 1 соответственно, но многие находят чистый чёрный слишком резким для долгого чтения. Поэтому платформа не выбирает один вариант за пользователя — ровно то же правило №6 из списка выше.
С чего начать, если тёмной темы ещё нет
Не с перекраски. С набора цветов.
- Выпишите все цвета, которые уже есть на сайте.
Фоны, поверхности, текст, границы, акцент, состояния успеха и ошибки. Обычно их оказывается неожиданно много, и часть дублируется без причины.
- Подберите пару для тёмной темы к каждому цвету.
Не «инвертируйте», а именно подберите — проверяя контраст и глядя на живом экране, а не в макете дизайнера.
- Проверьте контраст числом.
4,5 к 1 для обычного текста, 3 к 1 для крупных заголовков. Это займёт минуты, а спасёт от переделки после запуска.
- Пройдите весь сайт, а не только главную.
Формы, письма, страницы ошибок, графики. Список из раздела выше — с него и начните.
Когда набор готов, переключение темы становится технической мелочью. Когда набора нет, тёмная тема превращается в бесконечную ловлю белых пятен по сайту.
Доработка существующего сайтаДобавим тёмную тему к уже работающему сайту без пересборки с нуля
Если сайта пока нет вообще или дизайн планируется с нуля — разумнее сразу заложить обе темы в макет, а не пристраивать тёмную версию потом. Разбирали похожую логику и для шапки сайта: в статье про оформление шапки сайта те же правила иерархии и контраста работают и в светлой версии. А что вообще должно быть на сайте малого бизнеса, чтобы по нему звонили, — в статье про дизайн сайта для малого бизнеса. Тёмная тема особенно уместна на одностраничнике — том же портфолио или личной странице: разбирали в статьях про одностраничные сайты и про сайты знаменитостей и блогеров.
Частые вопросы
Тёмная тема увеличивает конверсию?
Прямой и однозначной зависимости нет — конверсию двигают цена, оффер и путь до заявки, а не цвет фона. Тёмная тема влияет косвенно: делает вечернее чтение удобнее и подчёркивает премиальность оформления, если сделана аккуратно.
Можно ли просто инвертировать цвета светлой темы?
Технически можно, но результат обычно нечитаемый: чистый чёрный фон и чистый белый текст дают слишком резкий контраст, а яркие акцентные цвета начинают вибрировать. Палитру для тёмной темы нужно подбирать заново, а не переворачивать автоматически.
Нужна ли тёмная тема, если аудитория в основном старше пятидесяти?
Как единственный вариант — нет. С возрастом контрастная чувствительность глаза снижается, и светлый текст на тёмном фоне читается заметно хуже, чем на белом. Сделайте тёмную тему опцией с переключателем, а не единственным вариантом оформления.
Сколько стоит добавить тёмную тему на готовый сайт?
Зависит от того, сколько экранов и состояний уже нарисовано и есть ли у сайта единая система цветов. Если системы нет, сначала придётся её выписать, а это отдельная работа. Точнее скажем на бесплатном разборе — там же прикинем объём и срок.
Как понять, что мой тёмный дизайн реально читаемый, а не просто красивый на мониторе дизайнера?
Измерить контраст числом — 4,5 к 1 для обычного текста, 3 к 1 для крупных заголовков — и посмотреть страницу на телефоне при ярком свете, а не только в тёмной комнате на большом экране.
Что делать с логотипом, если он чёрный на прозрачном фоне?
Сделать вторую версию логотипа — светлую или контурную — специально для тёмного фона. Один и тот же файл логотипа для обеих тем почти всегда даёт исчезающий силуэт на одной из них.
Для технических специалистов
Автоматическое определение системной темы делается через медиазапрос prefers-color-scheme: dark в CSS — браузер сам сообщает, что выбрано в настройках устройства. Мета-тег color-scheme в <head> дополнительно подсказывает браузеру красить системные элементы — скроллбар, выделение текста — в тон странице.
Палитру удобнее хранить в CSS-переменных (custom properties): один набор токенов цвета для светлой темы, второй — для тёмной, а компоненты обращаются к переменной, а не к конкретному коду цвета. Тогда переключение темы — это подмена набора переменных, а не перекраска каждого элемента вручную.
Выбор пользователя стоит сохранять в localStorage и применять его до отрисовки страницы — иначе будет заметная вспышка неправильной темы на долю секунды при каждой загрузке. Для проверки контраста годится любой бесплатный калькулятор по формуле WCAG; для более точной оценки восприятия яркости существует новая методика APCA, но пока это черновой стандарт, а не обязательное требование.
Назад к блогу
