Тёмная тема сайта: влияет ли на SEO и как её внедрить

Тёмная тема сайта: влияет ли на SEO

Короткий ответ: нет. Ни Яндекс, ни Google не понижают страницу из-за наличия prefers-color-scheme — цветовая схема не входит ни в один из проверяемых факторов ранжирования. Тёмная тема — это про комфорт пользователя, узнаваемость бренда и впечатление, а не про позиции в выдаче. Но есть нюансы: они касаются не SEO, а скорости загрузки и поведенческих факторов.

• Второй CSS-файл утяжеляет страницу. Тёмная палитра — это ещё 20–60 КБ стилей, которые нужно загрузить и распарсить поверх основных.
• Неправильная реализация бьёт по поведенческим факторам. FOUC (белая вспышка) и скрытые до инициализации блоки вызывают ложные клики и уход со страницы.

Инверсия ломает контраст, бренд и доступность

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

• Контраст текста к фону — не ниже 4.5:1, иначе страница отсеивает часть аудитории.
• Чистый #000000 на OLED даёт смазывание шрифта — практичнее слегка приподнятый чёрный, например #121212.
• Тёмную палитру стоит собирать из того же макета, а не переворачивать цвета в коде: так сохраняется идентичность.

Белая вспышка: как убрать FOUC

Классическая ошибка — инициализировать тему в конце body: страница успевает отрисоваться в светлой палитре, и пользователь видит белую вспышку. Правильный механизм другой. Атрибут data-theme выставляется до отрисовки страницы: инлайн-скрипт в head читает localStorage и ставит document.documentElement.dataset.theme, а сам скрипт размещается в head до подключения стилей. Тогда тема применяется ещё до первой отрисовки, и вспышки не бывает.

Картинки, иконки и сторонние виджеты

Логотипы и иконки готовят во второй, тёмной версии и переключают через CSS или элемент picture с медиа-атрибутом prefers-color-scheme: dark — тогда браузер сам выберет нужный файл без JavaScript. Фотографии тонируют CSS-фильтром: немного снижают яркость и добавляют лёгкий холодный оттенок, чтобы снимок не выбивался из тёмной страницы. Сторонние виджеты — карты, отзывы, видеоплееры — изолируют в контейнер с собственной тёмной версией: если чужой блок не умеет перекрашиваться, его разумнее встроить в светлый блок с рамкой, чем красить извне.

Сколько стоит и сколько занимает

Если дизайн уже отрисован в Figma, работа сводится к палитре, а не к разработке с нуля. Лендинг или сайт-визитка — 3–5 рабочих дней. Корпоративный сайт на 20–40 страниц — 2–4 недели с учётом пересборки ключевых шаблонов, страниц услуг и форм.

• Лендинг — от 20 000 ₽.
• Многостраничный сайт — от 35 000 ₽.
• Интернет-магазин — от 80 000 ₽.
• Сборка на 1С-Битрикс — от 60 000 ₽, на HostCMS — от 45 000 ₽.

Отдельно считайте графику: вторая версия логотипа, иконки и перекраска изображений обычно добавляют 1–3 рабочих дня и до 30% к бюджету проекта.

Кому тёмная тема действительно нужна

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

Тёмная тема — не фактор ранжирования, а инструмент комфорта. Внедряйте её, когда она совпадает с брендом, и не ждите от неё роста позиций.