Содержание12
- Когда тёмная тема сайта нужна бизнесу
- Чем тёмная тема отличается от инверсии и night mode
- Мифы о влиянии тёмной темы на глаза, батарею и сон
- Кому тёмная тема подходит, а кому может мешать
- Когда внедрять тему на лендинге, в каталоге, магазине или кабинете
- Как подобрать палитру, контраст и фирменные цвета
- Как подготовить карточки товара, CTA, фото и логотип
- Как внедрить системную тему и ручной переключатель
- Как принять работу над тёмной темой
- Типовые ошибки при внедрении тёмной темы
- Частые вопросы
- Источники
Тёмная тема подходит не каждому сайту. Её стоит рассмотреть для кабинета, CRM или медиа, где люди долго работают с интерфейсом. Для короткого лендинга обычно важнее сразу показать оффер и кнопку. Разберём, когда закладывать вторую палитру в бриф, как сохранить фирменный стиль и что проверить при приёмке.
Когда тёмная тема сайта нужна бизнесу
Для кабинета, CRM или медиа тёмная тема может быть полезна, если люди подолгу работают в интерфейсе и возвращаются к нему. На коротком лендинге или визитке обычно достаточно одной хорошо читаемой схемы: здесь важно показать оффер и кнопку с первого экрана. Вторая тема требует отдельной проработки фонов, текста, акцентов и состояний элементов.
Светлая схема не устаревает из-за появления тёмной. Одни посетители заходят сравнить цены и уйти, другие подолгу ведут сделки в кабинете. Сначала разберитесь, как люди пользуются сайтом, и лишь затем решайте, нужна ли им вторая палитра.
Бриф должен объяснять задачу темы. Одного желания сделать интерфейс похожим на крупный сервис недостаточно.
Если у вас нет кабинета и повторных визитов, сначала доведите до ясности одну светлую схему.
Чем тёмная тема отличается от инверсии и night mode
У тёмной темы своя палитра фона, текста, акцентов и состояний; инверсия автоматически переворачивает светлую схему. Системный night mode сообщает сайту о предпочтении пользователя, а сайт выбирает палитру с помощью prefers-color-scheme.
При инверсии могут измениться фото, тени и цвета иконок. Сайт не знает, какие фирменные цвета нужно сохранить и какие поверхности сделать темнее. Поэтому для предсказуемого результата палитру стоит подготовить отдельно.
| Критерий | Светлая схема | Тёмная тема | Инверсия цветов |
|---|---|---|---|
| Палитра | Один набор поверхностей | Отдельные цвета фона, текста, акцентов и состояний | Светлую схему переворачивают целиком |
| Фото | Исходные кадры | Проверенные для тёмного фона изображения | Белые подложки могут выделяться |
| Тени | Тёмная тень | Обводка или тень, подходящая тёмной поверхности | Тень может превратиться в светлое пятно |
| Доступность | Контраст проверяют на светлом фоне | Контраст проверяют заново | Контраст и фирменные цвета сложнее контролировать |
| Когда применять | Основной режим, короткие визиты | Кабинет, CRM, медиа с долгой работой | Не заменяет отдельную палитру |
Мифы о влиянии тёмной темы на глаза, батарею и сон
Тёмная тема сама по себе не устраняет усталость глаз. На восприятие влияют освещение, яркость экрана и контраст текста. Например, в ярко освещённой комнате тёмный фон может оказаться неудобным.
Расход батареи зависит от экрана и устройства. По одному цвету сайта нельзя уверенно оценить экономию, поэтому без замера на целевых устройствах не стоит обещать пользователям более долгую работу аккумулятора.
Тёмную палитру не нужно путать с ночным фильтром экрана. Фильтр меняет оттенок изображения на устройстве, а тема сайта — цвета его интерфейса. Выбирайте для текста и фона сочетания, которые остаются комфортными для чтения.
Кому тёмная тема подходит, а кому может мешать
В тёмном помещении или при долгой работе в интерфейсе часть пользователей предпочитает тёмную тему. Другим удобнее светлая схема. При отдельных особенностях зрения восприятие светлого текста на тёмном фоне тоже может различаться.
Для длинной статьи или каталога с фотографиями проверьте обе схемы на реальных страницах. Не делайте медицинских выводов по выбору темы: дайте переключатель и позвольте человеку выбрать удобный режим.
Для каталога при дневном свете я бы сначала настроил светлую схему. Для вечерней работы в кабинете добавил бы переключатель.
Когда внедрять тему на лендинге, в каталоге, магазине или кабинете
Короткому лендингу обычно хватает одной схемы. В каталоге и магазине тёмную тему стоит рассматривать, если команда готова проверить карточки, цены, бейджи и кнопки покупки. Для кабинета, CRM или SaaS с долгими рабочими сессиями такая тема может быть полезна.
Стоимость и срок зависят от числа экранов и графики. Чтобы оценить работу, нужно определить её состав по макетам. Не закладывайте в бюджет часы, взятые без такой оценки.
Для короткого одностраничного сайта обычно хватает одной схемы. Для сайта-каталога с карточками товара обсудите тему вместе с адаптацией карточек. Если вы ещё выбираете тип сайта, сначала решите, какой сайт нужен бизнесу, и учтите в выборе, как долго люди будут работать с интерфейсом.
| Тип сайта | Рекомендация | Что проверить |
|---|---|---|
| Короткий лендинг | Начать с одной схемы | Читаемость оффера и кнопки |
| Визитка | Начать с одной схемы | Понятна ли основная информация |
| Каталог | Рассматривать тёмную тему вместе с адаптацией карточек | Фото, цены и бейджи |
| Интернет-магазин | Включать тему после проверки карточек | Цены, скидки и кнопки покупки |
| Кабинет или CRM | Рассмотреть переключатель темы | Формы, фокус и системный режим |
Как подобрать палитру, контраст и фирменные цвета
Для тёмной темы настройте цвета заново. Рекомендации WCAG 2.2 предусматривают проверку контраста текста и элементов интерфейса. Одного сочетания светлого текста с тёмным фоном недостаточно, чтобы оценить удобство всей страницы.
Разделите уровни фона: страница, карточка и диалоговое окно должны различаться. Фирменный акцент на тёмной поверхности тоже нужно проверить: цвет может выглядеть слишком ярким или сливаться с подписью. Для отделения карточек пригодятся обводки и разные оттенки поверхности.
Задайте общие имена переменным для обеих схем: например, фон, поверхность, основной и вторичный текст, рамка и акцент. Тогда разработчику будет проще поддерживать их согласованными.
| Что проверяем | Как оценить |
|---|---|
| Обычный текст | Достаточно ли он различим на фоне |
| Крупный текст и кнопки | Читаются ли подпись и границы элемента |
| Слабый контраст | Не сливается ли текст с поверхностью |
| Чёрный фон и белый текст | Удобно ли читать длинные фрагменты |
Проверьте контраст на готовом сайте. Макет может не передавать градиент, фотографию и оформление полей браузером.
Как подготовить карточки товара, CTA, фото и логотип
Не переводите витрину в тёмную тему одной инверсией. Отдельно проверьте фотографии с белым фоном, чёрные иконки, цены, скидки и кнопки. Если товары плохо различимы на карточках, оставьте для каталога светлую схему, пока материалы не готовы.
Логотипу может понадобиться отдельная версия для тёмного фона. Проверьте также, как выглядят превью ссылок и изображения, которыми магазин делится в соцсетях.
Приоритет магазина — чтобы покупатель мог сравнить товар и увидеть цену и кнопку покупки. Настроение интерфейса можно прорабатывать после этого.
- Фото с белым фоном могут резко выделяться на тёмной поверхности.
- Чёрные SVG-иконки могут теряться; подготовьте подходящую версию или настройте цвет через
currentColor. - Для цены, старой цены и скидки подберите различимые цвета.
- Проверьте бейджи скидки и статуса товара.
- Убедитесь, что подпись CTA читается во всех состояниях кнопки.
- Подготовьте версию логотипа, подходящую для тёмного фона.
Как внедрить системную тему и ручной переключатель
Задайте цвета обеих схем через CSS-переменные, укажите поддержку color-scheme и настройте prefers-color-scheme. Добавьте ручной переключатель, чтобы пользователь мог выбрать режим независимо от системной настройки. Проверьте страницы и состояния элементов в обеих схемах.
color-scheme сообщает браузеру, что сайт поддерживает тёмную тему, и помогает согласовать оформление системных элементов. prefers-color-scheme позволяет странице учитывать предпочтение, заданное в настройках устройства. Если тема меняется после загрузки страницы, проверьте, не появляется ли заметная вспышка светлой схемы.
Укажите цвета интерфейса браузера для обеих тем. Проверьте также отображение сайта в режиме повышенной контрастности.
Как принять работу над тёмной темой
Принимайте тёмную тему как набор согласованных страниц и состояний, а не как изменение фона. Пройдите живую версию сайта с системной настройкой и ручным переключателем. Макета недостаточно: он может не показать поведение браузерных полей и видимость текста на реальных экранах.
Начните с форм, карточек, логотипа и предпросмотра ссылки. Если при первой загрузке появляется резкая вспышка светлой схемы или элементы пропадают, попросите подрядчика проверить реализацию до приёмки.
Типовые ошибки при внедрении тёмной темы
Частая проблема — инвертировать готовый макет и забыть про формы, карточки и фирменные цвета. Тогда части интерфейса выглядят несогласованно. Проверьте отдельные состояния элементов, логотип и изображения, прежде чем запускать тему на всём сайте.
Для кабинета, CRM или медиа с долгими сессиями я рекомендую рассмотреть переключатель. В каталоге сначала подготовьте карточки и фотографии. Для короткого лендинга или визитки обычно достаточно одной схемы; если позднее появятся повторные визиты и длительная работа, решение можно пересмотреть.
Если вы планируете вторую схему для кабинета или каталога, пришлите тип сайта и список экранов: обсудим объём работ.
Источники
- prefers-color-scheme — MDN Web Docs
- color-scheme — MDN Web Docs
