Тёмная тема в браузере и телефоне: как она ломает отображение сайта

Клиент звонит и говорит: «У вас на сайте ничего не видно, белым по белому написано». Вы открываете сайт — всё нормально. Он присылает снимок экрана — и там действительно каша: текст сливается с фоном, кнопки серые, часть надписей просто пропала. Разница в одном: у него включена тёмная тема. Эта проблема встречается гораздо чаще, чем принято думать, и почти никогда не диагностируется, потому что владелец сайта её у себя не видит. Между тем тёмной темой пользуется заметная доля людей, и каждый из них — потенциальное потерянное обращение. Разберём, откуда берётся поломка, как её найти и что с ней делать.

Что такое тёмная тема и почему сайт о ней ничего не знает

Тёмная тема — это системная настройка устройства, при которой интерфейс отображается светлым текстом на тёмном фоне. Она есть в телефонах, в настольных системах и в браузерах. Включают её по разным причинам: кому-то комфортнее для глаз вечером, кто-то экономит заряд батареи, у кого-то она включается автоматически по расписанию.

Браузер сообщает сайту о том, что у пользователя выбрана тёмная тема, через специальный признак. Сайт может на него отреагировать — подготовить отдельное оформление, — а может проигнорировать. Большинство сайтов игнорирует, и это само по себе не страшно: сайт просто остаётся светлым, как и был.

Проблема начинается там, где браузер решает помочь и меняет оформление сам. Такое поведение есть у ряда браузеров и особенно распространено на телефонах: если сайт не заявил, что умеет работать в тёмной теме, браузер может принудительно инвертировать цвета или применить собственные правила. И вот тут начинается разрушение.

Отдельный источник проблем — встроенные браузеры внутри приложений и специальные режимы чтения, которые тоже перекрашивают страницу по своим правилам.

Как именно ломается сайт

Симптомы всегда одни и те же, и по ним легко опознать проблему.

Текст сливается с фоном. Самый частый случай. Цвет текста задан жёстко — например, тёмно-серый, — а фон браузер перекрасил в тёмный. Получается тёмное на тёмном. Или наоборот: фон блока задан белым жёстко, а цвет текста браузер сделал светлым, и получается белое на белом.

Пропадают картинки. Логотип в формате с прозрачным фоном, нарисованный чёрным цветом, на тёмном фоне становится невидимым. То же происходит с иконками и схемами.

Кнопки теряют вид. Кнопка была ярко-зелёной с белым текстом, стала серой с серым. Человек не понимает, что это кнопка, и не нажимает.

Формы становятся нечитаемыми. Поля ввода перекрашиваются браузером по своим правилам, подсказки внутри полей исчезают, текст, который человек вводит, не виден. Это прямая потеря заявок: человек не может заполнить форму.

Рамки и разделители исчезают. Таблица превращается в кашу из цифр, карточки товаров сливаются в одно полотно.

Тени и подложки выглядят грязными. Полупрозрачные элементы, рассчитанные на белый фон, на тёмном дают мутные пятна.

Общий знаменатель: страдают в первую очередь те элементы, которые отвечают за обращение, — формы, кнопки, телефоны, цены. Именно поэтому проблема так дорого обходится.

Почему её почти никогда не замечают

Причины простые и оттого обидные.

Владелец сайта и его сотрудники обычно работают за компьютером со светлой темой. Они физически не видят того, что видит часть посетителей.

Проверка сайта после доработок делается на рабочих машинах разработчика — там тоже, как правило, светлая тема в браузере, даже если система тёмная.

Клиенты редко жалуются. Человек, увидевший нечитаемую страницу, не пишет в поддержку — он просто уходит. Из ста столкнувшихся пожалуется в лучшем случае один.

Статистика не показывает проблему явно. В отчётах видно только, что часть посетителей уходит быстро, но причин этому может быть сколько угодно, и тёмную тему в этом списке обычно не рассматривают.

В итоге сайт может месяцами терять часть обращений, и никто не будет знать почему.

Как проверить свой сайт за десять минут

Проверка простая и не требует специальных инструментов.

На телефоне: включите тёмную тему в настройках системы, откройте сайт в нескольких браузерах подряд. Именно в нескольких — они ведут себя по-разному. Пройдите весь путь клиента: главная, каталог или список услуг, конкретная страница, форма заявки, страница контактов.

На компьютере: включите тёмное оформление в настройках системы, перезапустите браузер, откройте сайт. Дополнительно проверьте режим чтения, если браузер его предлагает.

Отдельно проверьте встроенные браузеры: откройте ссылку на свой сайт из мессенджера и из ленты соцсети — там страница открывается внутри приложения, и поведение может отличаться.

На что смотреть в первую очередь: читается ли телефон в шапке, видна ли кнопка обратного звонка, видны ли поля формы и текст, который вы в них вводите, читаются ли цены, виден ли логотип, не пропали ли иконки.

Сделайте снимки экрана всего, что выглядит не так. Это готовое техническое задание.

Как это чинится

Есть два подхода, и выбор между ними зависит от того, чего вы хотите добиться.

Подход первый: запретить браузеру самодеятельность. Сайт прямо заявляет, что рассчитан на светлое оформление. После этого браузеры, которые умеют читать это указание, перестают принудительно перекрашивать страницу. Это самое быстрое решение, оно занимает у разработчика немного времени и снимает большую часть проблем. Минус: пользователь, привыкший к тёмной теме, увидит яркую белую страницу — но она хотя бы будет работать.

Подход второй: сделать нормальную тёмную версию. Сайт определяет настройку пользователя и показывает собственное тёмное оформление — с подобранными цветами, читаемым текстом и правильными кнопками. Это правильный путь, но он требует работы дизайнера и разработчика: нужно подобрать палитру, проверить каждый блок, подготовить варианты логотипа и иконок.

На практике разумная последовательность такая: сначала быстро закрыть проблему первым способом, чтобы перестать терять обращения, а потом при плановых работах сделать полноценную тёмную версию.

Есть и третий вариант, к которому иногда прибегают: переключатель темы прямо на сайте. Но это не решает исходную проблему, потому что браузер всё равно может вмешаться до того, как пользователь что-то нажмёт.

Что нужно поправить в любом случае

Независимо от выбранного подхода, есть несколько вещей, которые стоит привести в порядок — они снижают риск поломки при любом внешнем вмешательстве.

Логотип и иконки. Изображения с прозрачным фоном, нарисованные одним тёмным цветом, должны иметь светлую версию. Либо логотип размещается на собственной подложке, которая не даёт ему исчезнуть.

Цвета текста и фона всегда задавать парой. Если для блока задан цвет фона, обязательно должен быть задан и цвет текста, и наоборот. Именно незаданные пары дают эффект «белое по белому».

Избегать текста, вписанного в картинку. Надпись внутри изображения не перекрашивается и может оказаться нечитаемой. Заодно её не видит поиск и не может процитировать нейропоиск.

Поля форм оформлять явно. Границы, фон, цвет текста и цвет подсказки — всё должно быть задано. Форма — самый чувствительный элемент.

Проверить контраст. Даже в светлом оформлении светло-серый текст на белом фоне читается плохо, а при вмешательстве браузера становится невидимым. Достаточный контраст полезен всем, включая людей, которые смотрят сайт на солнце.

Схемы и инфографику делать векторными или с фоном. Тонкие чёрные линии на прозрачном фоне — первые кандидаты на исчезновение.

На ХостСМС большая часть этих правок делается в файле стилей шаблона и не затрагивает содержимое сайта — то есть это работа на несколько часов, а не переделка.

Как это связано с продвижением 3 в 1

Наш подход «3 в 1» означает, что обращения приходят из трёх точек и каждая из них должна работать без потерь. Тёмная тема бьёт по всем трём.

Поиск и нейропоиск. Человек пришёл из поиска, увидел нечитаемую страницу и ушёл. Формально вы получили посетителя, фактически — потеряли обращение. Более того, массовые быстрые уходы — плохой сигнал для поисковых систем. Отдельно стоит помнить про текст в картинках: то, что нарисовано на изображении, не может быть процитировано в генеративном ответе. Когда важные факты — цены, условия, характеристики — вынесены в картинку «чтобы красиво», они выпадают и из выдачи, и из нейропоиска. Текстом такие вещи и безопаснее, и полезнее.

Яндекс.Справочник. Человек нашёл вас на Яндекс Картах, перешёл по ссылке на сайт с телефона — и попал на ту же нечитаемую страницу. Переход из карточки стоит дорого: это горячий клиент, который уже выбрал вас из списка. Потерять его на отображении особенно обидно. Поэтому проверять сайт с телефона в тёмной теме нужно именно по тому пути, по которому ведёт карточка.

2ГИС. Аудитория 2ГИС почти целиком мобильная, и доля тёмной темы среди мобильных пользователей заметно выше, чем среди настольных. Кроме того, переход из приложения часто открывает сайт во встроенном браузере, где поведение ещё менее предсказуемо. Если вы получаете обращения из 2ГИС, проверка сайта именно по этому маршруту обязательна.

Работа только над одной точкой даёт неполный результат. Можно идеально настроить карточки и вложиться в продвижение, но если каждый третий посетитель с телефона видит кашу вместо формы, весь поток упирается в одно и то же узкое место. И обращения с карт, и заявки с сайта нужно считать вместе — тогда провал становится виден.

Как понять, что вы уже теряете на этом обращения

Прямого отчёта «сколько людей ушло из-за тёмной темы» не существует, но косвенные признаки есть.

В Яндекс.Метрике посмотрите долю быстрых уходов отдельно по мобильным устройствам и по браузерам. Если в одном-двух браузерах она заметно выше, это повод проверить отображение именно в них.

Посмотрите вебвизор — записи поведения посетителей. Если человек открыл страницу, немного поводил по ней и ушёл, не дойдя до формы, стоит воспроизвести его путь на том же типе устройства.

Сравните конверсию в обращение по типам устройств. Разница между компьютером и телефоном есть почти всегда, но если она очень велика, причина может быть именно в отображении.

И самое простое: спросите нескольких знакомых и клиентов, которые пользуются тёмной темой, открыть ваш сайт и прислать снимок экрана. Пять человек дадут больше информации, чем любые отчёты.

Что проверять при каждом обновлении сайта

Тёмная тема — не разовая проблема. Она возвращается после любых изменений в оформлении: нового блока, новой страницы, обновления шаблона, добавления виджета.

Поэтому проверку стоит включить в обычный перечень проверок при публикации. Минимальный набор: новая страница открыта на телефоне в тёмной теме, проверены текст, кнопки, форма и картинки.

Отдельно стоит проверять внешние виджеты — чаты, формы обратного звонка, калькуляторы. Они живут своей жизнью и часто имеют собственное оформление, которое может сломаться независимо от сайта.

И раз в квартал имеет смысл проходить полный путь клиента в тёмной теме: браузеры обновляются, их поведение меняется, и то, что работало полгода назад, может перестать работать сегодня.

Типичные ошибки

Проверять сайт только на своём компьютере со светлой темой. Так проблема не обнаруживается никогда.

Считать, что тёмная тема — это редкость. Среди мобильных пользователей она распространена гораздо шире, чем кажется, и особенно среди тех, кто много пользуется телефоном вечером.

Делать тёмную версию наполовину: перекрасить основные блоки и забыть про формы, таблицы и всплывающие окна. Половинчатая тёмная тема хуже, чем её отсутствие.

Полагаться на автоматическое перекрашивание браузером. Браузер не знает, где у вас важное, и портит именно то, что важнее всего.

Выносить телефон, цены и условия в изображения. Это вредит и отображению, и видимости в поиске, и попаданию в генеративные ответы.

Не проверять внешние виджеты. Форма заявки от стороннего сервиса может оказаться единственным нечитаемым элементом на странице — и этого достаточно, чтобы потерять обращение.

Порядок действий

Первое: проверьте сайт сами — на телефоне в тёмной теме, в двух-трёх браузерах, пройдя весь путь до отправки заявки. Соберите снимки экрана.

Второе: если найдены поломки, закройте проблему быстрым способом — явным указанием, что сайт рассчитан на светлое оформление. Это снимет основную потерю.

Третье: приведите в порядок базовые вещи — логотип со светлой версией, заданные пары цветов, оформленные поля форм, достаточный контраст.

Четвёртое: при следующих плановых работах над сайтом заложите полноценную тёмную версию — это уже вопрос удобства, а не аварийного ремонта.

Пятое: добавьте проверку в тёмной теме в перечень проверок при публикации новых страниц.

Обычно вся работа занимает от нескольких часов до пары дней, а эффект виден сразу: возвращается та часть мобильных обращений, которая просто не доходила до формы.

Если вы не уверены, как ваш сайт выглядит у посетителей с тёмной темой, и хотите разобраться без экспериментов, обратитесь к нам. Специалисты компании «Сайты Профессионально» бесплатно проверят отображение сайта на разных устройствах и в разных браузерах, покажут, где именно теряются обращения, и предложат понятный план исправлений с оценкой трудозатрат. Дальше вы сами решите, выполнять его своими силами или доверить нам.