Тёмная тема в дизайне: польза, ошибки и доступность

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

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

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

Что такое тёмная тема

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

Тёмная тема влияет не только на фон страницы. Она включает:

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

Полноценная тема является системой взаимосвязанных цветов и состояний. Она не должна собираться из нескольких глобальных замен вроде:

background: #000;
color: #fff;

Тёмная тема, ночной режим и режим высокой контрастности

Эти понятия связаны, но не являются взаимозаменяемыми.

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

Откуда появилась тёмная тема

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

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

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

Почему пользователи выбирают тёмную тему

Сниженная яркость интерфейса

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

Личные предпочтения

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

Привычка

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

Фокус на визуальном содержимом

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

Энергопотребление

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

Особенности восприятия

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

Улучшает ли тёмная тема здоровье глаз

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

Комфорт зависит от сочетания факторов:

• освещения в помещении;
• яркости экрана;
• размера текста;
• гарнитуры;
• толщины начертания;
• межстрочного интервала;
• контраста;
• времени непрерывной работы;
• особенностей зрения;
• качества дисплея.

Не следует использовать медицинские обещания вроде «защищает зрение» или «устраняет усталость глаз». Корректнее говорить о снижении яркости интерфейса и возможности выбрать оформление, которое удобнее конкретному человеку.

Читаемость тёмного интерфейса

Читаемость определяется не только направлением контраста. На неё влияют ширина строки, размер шрифта, начертание, плотность текста, светлота фона и качество отображения символов.

Короткие интерфейсные тексты

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

Длинные статьи

Для лонгридов нельзя заранее объявить одну тему лучшей. Необходимо тестировать:

• длительное чтение;
• ширину текстовой колонки;
• основной шрифт;
• межстрочный интервал;
• размер абзацев;
• выделения;
• ссылки;
• таблицы;
• код;
• мобильные устройства.

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

Тёмная тема и доступность

Тёмная цветовая схема не становится доступной автоматически. Светло-серый текст на почти чёрном фоне может иметь достаточный контраст, а яркий брендовый цвет на тёмно-сером фоне может не проходить требования.

WCAG 2.2 устанавливает для обычного текста минимальное соотношение контраста 4,5:1, а для крупного текста — 3:1. Эти требования относятся и к светлой, и к тёмной теме.

Значимые границы элементов управления, иконки и графические объекты должны иметь контраст не менее 3:1 относительно соседних цветов, если они необходимы для понимания или управления.

Что проверять отдельно

• основной текст;
• вторичный текст;
• ссылки;
• кнопки;
• границы полей;
• placeholder;
• иконки;
• чекбоксы;
• переключатели;
• выбранные элементы;
• ошибки;
• успешные состояния;
• индикатор фокуса;
• линии графиков;
• легенды;
• разделители таблиц.

Не полагайтесь только на цвет

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

Дополняйте цвет:

• текстом;
• иконкой;
• подчёркиванием;
• формой;
• толщиной линии;
• маркером;
• изменением фона;
• понятной подписью.

Чистый чёрный фон: ошибка или допустимый вариант

Универсального запрета на #000000 не существует. Чистый чёрный может быть уместен в медиаплеере, галерее, полноэкранной презентации или интерфейсе, где требуется минимальное свечение поверхности.

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

Для основной поверхности часто применяются тёмно-серые, графитовые, синие или нейтральные оттенки:

--surface-page: #111318;
--surface-panel: #181b21;
--surface-raised: #20242c;
--text-primary: #f2f4f7;
--text-secondary: #b4bac4;

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

Почему простая инверсия цветов не работает

Автоматическая инверсия способна:

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

Тёмная тема проектируется как самостоятельное состояние дизайн-системы. Цвета могут быть связаны по смыслу, но не обязаны быть математически инвертированными.

Цветовые токены вместо жёстких значений

Управлять двумя темами удобнее через семантические переменные.

Вместо:

.card {
    background: #ffffff;
    color: #222222;
    border-color: #dddddd;
}

используйте:

.card {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border-default);
}

Пример токенов:

:root {
    --surface-page: #ffffff;
    --surface-card: #f7f8fa;
    --surface-elevated: #ffffff;
    --text-primary: #20242a;
    --text-secondary: #626975;
    --border-default: #d8dce2;
    --accent: #145fd7;
}

[data-theme="dark"] {
    --surface-page: #111318;
    --surface-card: #181b21;
    --surface-elevated: #20242c;
    --text-primary: #f2f4f7;
    --text-secondary: #b4bac4;
    --border-default: #343944;
    --accent: #72a7ff;
}

Какие группы токенов нужны

• поверхности;
• текст;
• границы;
• акцент;
• ссылки;
• фокус;
• успех;
• предупреждение;
• ошибка;
• информация;
• оверлей;
• тени;
• графики;
• код;

Иерархия поверхностей

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

• различий светлоты;
• границ;
• мягких светлых бликов;
• внутренних контуров;
• размытия оверлея;
• пространства;
• размера;
• типографической иерархии.

Пример уровней:

Типографика в тёмной теме

Основной текст

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

Вторичный текст

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

• описаний полей;
• дат;
• подписей;
• цен;
• условий;
• контактной информации;
• ошибок;
• юридических сведений.

Толщина начертания

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

Межстрочный интервал

Плотный светлый текст на тёмном фоне быстро превращается в сплошной массив. Для статей и описаний полезны:

• достаточная высота строки;
• короткие абзацы;
• ограниченная ширина колонки;
• понятные подзаголовки;
• визуальные интервалы;
• выделение списков;
• стабильная иерархия.

Акцентные цвета

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

Для тёмной темы может потребоваться

• повысить светлоту акцентного цвета;
• уменьшить насыщенность;
• создать отдельный оттенок ссылок;
• изменить цвет текста кнопки;
• переработать состояния hover и active;
• адаптировать цвет фокуса;
• разделить фон и контур кнопки.

Цель заключается не в сохранении точного RGB-значения бренда, а в сохранении узнаваемости и доступности.

Статусные цвета

Зелёный, красный, жёлтый и синий должны работать на нескольких поверхностях:

• как текст;
• как фон уведомления;
• как граница;
• как иконка;
• как точка на графике;
• как выбранное состояние.

Один оттенок редко подходит для всех ролей. Для статуса полезно создать набор:

--success-text
--success-icon
--success-border
--success-surface

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

Кнопки в тёмной теме

Кнопка должна отличаться от фона, текста и соседних элементов во всех состояниях.

Проверьте состояния

• обычное;
• наведение;
• нажатие;
• фокус;
• загрузка;
• отключено;
• выбрано;
• ошибка.

Основная кнопка

Главное действие может использовать акцентный фон, но текст внутри должен сохранять необходимый контраст. Белый текст подходит не для каждого брендового цвета.

Вторичная кнопка

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

Отключённая кнопка

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

Формы

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

Проверьте

• фон поля;
• границу;
• label;
• placeholder;
• введённый текст;
• курсор;
• автозаполнение;
• ошибку;
• подсказку;
• фокус;
• disabled;
• select;
• чекбокс;
• radio;
• переключатель;
• загрузку файла;
• календарь;

Placeholder не заменяет label

Текст внутри поля исчезает после ввода и часто имеет пониженный контраст. Назначение поля должно оставаться понятным благодаря отдельной подписи.

Ошибки

Не обозначайте ошибку только красной рамкой. Добавьте сообщение, иконку и при необходимости связь через атрибуты доступности.

Ссылки

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

Используйте:

• подчёркивание;
• достаточный контраст;
• понятное состояние hover;
• видимый фокус;
• отличие посещённой ссылки при необходимости;
• нецветовой признак.

Ярко-синяя ссылка, подходящая для белого фона, может быть слишком тёмной на графитовом. Для dark mode часто требуется более светлый вариант.

Иконки

Одноцветные SVG удобнее растровых изображений, поскольку могут наследовать токены через currentColor.

.icon {
    color: var(--icon-default);
    fill: currentColor;
}

Проверьте:

• контраст;
• толщину линий;
• состояние disabled;
• фокус;
• иконки внутри кнопок;
• статусные иконки;
• иконки на цветных поверхностях;
• сочетание контура и заливки.

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

Логотип

Логотип может потребовать отдельной версии.

Возможные проблемы

• тёмный знак исчезает на фоне;
• белая подложка выглядит чужеродно;
• тонкие линии теряются;
• фирменный цвет не проходит контраст;
• растровое изображение имеет светлый прямоугольник;
• в SVG жёстко прописан цвет.

Варианты решения

• светлая версия знака;
• монохромный логотип;
• адаптивный SVG;
• отдельный файл;
• контрастная брендовая плашка;
• сохранение неизменной светлой зоны в шапке.

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

Фотографии и изображения

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

Возможные подходы

• не изменять контентные фотографии;
• использовать мягкую рамку;
• добавить нейтральную подложку;
• создать отдельную иллюстрацию для тёмной темы;
• уменьшить яркость только декоративного фона;
• адаптировать прозрачные PNG и SVG;
• проверить скриншоты светлых интерфейсов.

Изображения товаров

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

Видео и медиаконтент

Тёмный интерфейс часто подходит для видео, поскольку окружающая поверхность меньше отвлекает от кадра.

Проверьте:

• кнопки проигрывателя;
• прогресс-бар;
• субтитры;
• состояние фокуса;
• полноэкранный режим;
• обложку;
• элементы управления громкостью;
• сообщения об ошибке.

Таблицы

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

Для читаемой таблицы используйте

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

Графики и диаграммы

График, перенесённый из светлой темы без изменений, часто получает невидимые оси, слишком тёмные линии или яркие неоновые цвета.

Проверяйте

• фон области построения;
• сетки;
• оси;
• подписи;
• легенду;
• подсказки;
• выбранную точку;
• контраст соседних рядов;
• печать и экспорт;
• дальтонические сценарии.

Различайте ряды не только цветом, но и:

• формой маркера;
• штриховкой;
• толщиной;
• типом линии;
• подписью;
• расположением.

Редактор кода и технические блоки

Тёмная тема хорошо подходит для кода, но подсветка синтаксиса должна проходить проверку контраста.

Частые проблемы:

• комментарии почти не видны;
• строки и ключевые слова слишком похожи;
• ошибка обозначается только красным;
• номер строки имеет недостаточный контраст;
• выделение текста неразличимо;
• курсор исчезает;
• активная строка слишком яркая.

Прокрутка, выделение и системные элементы

Страница может быть тёмной, но системные поля, полоса прокрутки и элементы выбора даты останутся светлыми. Свойство CSS color-scheme сообщает браузеру, какие цветовые схемы поддерживает документ, и позволяет адаптировать часть системных элементов, включая формы и полосы прокрутки.

:root {
    color-scheme: light dark;
}

Дополнительно можно использовать:

<meta name="color-scheme" content="light dark">

MDN рекомендует размещать это указание в <head> до основной информации о стилях, чтобы браузер заранее знал о поддерживаемых схемах и мог уменьшить вероятность нежелательной светлой вспышки при загрузке.

Поддержка системной темы

Медиафункция prefers-color-scheme позволяет определить, выбрал ли пользователь светлую или тёмную схему в операционной системе или браузере.

@media (prefers-color-scheme: dark) {
    :root {
        --surface-page: #111318;
        --text-primary: #f2f4f7;
    }
}

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

Как должен работать переключатель темы

Практичный интерфейс предлагает три варианта:

• светлая;
• тёмная;
• как в системе.

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

Переключатель должен быть

• доступен с клавиатуры;
• понятно подписан;
• видим в обеих темах;
• не зависеть только от иконки солнца или луны;
• сохранять выбор;
• не перезагружать страницу без необходимости;
• сообщать текущее состояние;
• иметь видимый фокус.

Сохраняйте выбор пользователя

Для неавторизованного посетителя настройку можно хранить локально. Для авторизованного пользователя — в профиле, если это оправдано продуктом.

Приоритет может выглядеть так:

1. Явный выбор пользователя.
2. Настройка профиля.
3. Системное предпочтение.
4. Тема сайта по умолчанию.

Как избежать вспышки неправильной темы

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

Причины:

• поздняя загрузка скрипта;
• ожидание полной готовности DOM;
• тема определяется после загрузки CSS;
• нет базового color-scheme;
• сервер не знает сохранённое предпочтение;
• стили темы загружаются отдельным поздним файлом.

Способы уменьшить вспышку

• указать поддерживаемые схемы в <head>;
• использовать CSS-переменные;
• определять сохранённый выбор до отрисовки страницы;
• не загружать тему длинной цепочкой запросов;
• применять класс или атрибут к корневому элементу;
• согласовать фон страницы и цвет системной панели браузера.

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

Пример структуры переключения

CSS:

:root {
    color-scheme: light dark;
    --surface-page: #ffffff;
    --text-primary: #20242a;
}

:root[data-theme="dark"] {
    --surface-page: #111318;
    --text-primary: #f2f4f7;
}

body {
    background: var(--surface-page);
    color: var(--text-primary);
}

Логика внешнего JavaScript:

const savedTheme = localStorage.getItem('theme');

if (savedTheme === 'light' || savedTheme === 'dark') {
    document.documentElement.dataset.theme = savedTheme;
}

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

Нужно ли делать две отдельные таблицы стилей

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

Отдельные стили оправданы для:

• специфических иллюстраций;
• сложных графиков;
• особых теней;
• фоновых изображений;
• компонентов сторонних библиотек;
• редких исключений.

Структура может выглядеть так:

base.css
components.css
theme-light.css
theme-dark.css

или использовать единый файл с переменными. Выбор зависит от размера проекта и сборки, но компоненты не должны иметь две независимые версии разметки без необходимости.

Тёмная тема и производительность

Сама цветовая схема почти не влияет на скорость загрузки. Проблемы появляются из-за реализации:

• двух комплектов тяжёлых изображений;
• дублирования CSS;
• позднего JavaScript;
• перерисовки большого интерфейса;
• загрузки неиспользуемых шрифтов;
• лишних анимаций;
• стороннего виджета переключения;
• больших фоновых видео.

Оптимизируйте

• CSS-переменные;
• SVG;
• адаптивные изображения;
• кэширование;
• начальную установку темы;
• критические стили;
• загрузку ресурсов по необходимости;
• работу сторонних компонентов.

Тёмная тема и SEO

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

Проблемы могут возникнуть, если реализация:

• скрывает текст;
• создаёт неконтрастные ссылки;
• ломает меню;
• требует JavaScript для появления основного содержимого;
• дублирует страницы по параметру темы;
• создаёт разные URL для light и dark;
• замедляет загрузку;
• показывает поисковому роботу другое содержание;
• ломает изображения или структурированные данные.

Тема должна меняться на одном URL и не создавать отдельные индексируемые версии страницы.

Тёмная тема и брендинг

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

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

Проверьте соответствие бренду

• характеру продукта;
• аудитории;
• фирменным цветам;
• фотографии;
• типографике;
• эмоциональному тону;
• конкурентному окружению;
• контексту использования.

Для каких сайтов тёмная тема может быть особенно полезна

Медиа и развлечения

• видеосервисы;
• музыкальные платформы;
• галереи;
• игровые сайты;
• кино;
• стриминг.

Тёмный фон помогает сосредоточить внимание на изображении и видео.

Профессиональные инструменты

• редакторы кода;
• панели мониторинга;
• системы управления;
• графические редакторы;
• аналитические платформы;
• системы для длительной работы.

Навигация и карты

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

Портфолио

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

Технологические продукты

Dark mode может соответствовать ожиданиям аудитории, но не должен использоваться как замена понятной структуре и нормальному описанию продукта.

Где тёмная тема требует особой осторожности

Лонгриды и справочные сайты

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

Интернет-магазины

Цвет товара, фотографии и белые карточки производителей должны отображаться без искажений. Кнопка покупки и цена обязаны сохранять визуальный приоритет.

Медицинские и государственные сайты

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

Финансовые интерфейсы

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

Детские сайты

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

Тёмная тема как единственное оформление

Только тёмная тема может быть оправдана, если:

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

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

Стоит ли добавлять dark mode на корпоративный сайт

Ответ зависит от пользы и стоимости поддержки.

Аргументы в пользу

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

Аргументы против

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

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

Как оценить необходимость тёмной темы

Порядок проектирования тёмной темы

Шаг 1. Определите задачу

Зафиксируйте, зачем проекту требуется dark mode:

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

Шаг 2. Проведите аудит интерфейса

Составьте перечень:

• компонентов;
• состояний;
• типов изображений;
• графиков;
• внешних виджетов;
• системных элементов;
• писем;
• PDF;
• экспортируемых документов.

Шаг 3. Создайте семантические токены

Не привязывайте компоненты напрямую к белому и чёрному.

Шаг 4. Спроектируйте поверхности

Определите уровни страницы, карточек, меню, модальных окон и оверлеев.

Шаг 5. Настройте типографику

Проверьте заголовки, основной текст, подписи, ссылки и disabled-состояния.

Шаг 6. Адаптируйте брендовые цвета

Создайте доступные варианты акцентов и статусных оттенков.

Шаг 7. Переработайте изображения

Подготовьте логотипы, SVG, иллюстрации и скриншоты.

Шаг 8. Реализуйте системный режим

Используйте prefers-color-scheme как начальное предпочтение.

Шаг 9. Добавьте ручной выбор

Предоставьте светлую, тёмную и системную тему.

Шаг 10. Устраните вспышку

Определяйте тему до основной отрисовки.

Шаг 11. Проверьте доступность

Измерьте контраст и протестируйте клавиатурную навигацию.

Шаг 12. Проведите пользовательское тестирование

Проверьте реальные задачи, а не только привлекательность макета.

Как тестировать тёмную тему

Устройства

• настольный монитор;
• ноутбук;
• телефон;
• планшет;
• OLED-экран;
• LCD-экран;
• экран с низкой яркостью;
• экран с повышенной контрастностью.

Освещение

• яркий дневной свет;
• обычный офис;
• вечернее освещение;
• почти тёмное помещение;
• прямой солнечный свет.

Браузеры

• Chrome;
• Firefox;
• Safari;
• Edge;
• мобильные браузеры;
• встроенные WebView.

Системные сценарии

• система в светлом режиме;
• система в тёмном режиме;
• ручной выбор сайта;
• смена системной темы при открытой странице;
• очищенное локальное хранилище;
• запрет JavaScript;
• медленное соединение;
• первое открытие страницы.

Доступность

• навигация клавиатурой;
• масштаб 200%;
• контраст;
• видимый фокус;
• режим высокой контрастности;
• увеличенный текст;
• экранный диктор;
• эмуляция нарушений цветового зрения.

Метрики после запуска

Тёмную тему можно анализировать, но не следует превращать выбор оформления в скрытое профилирование.

Полезные показатели

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

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

Типичные ошибки тёмной темы

Инверсия всех цветов

Изображения и статусы получают неправильный вид.

Чистый белый текст на чистом чёрном везде

Интерфейс лишается мягкой иерархии и становится визуально резким.

Слишком серый текст

Дизайнер снижает контраст ради «спокойствия», а подписи перестают читаться.

Один оттенок фона

Карточки, меню и модальные окна сливаются.

Тени из светлой темы

Чёрные тени исчезают на тёмном фоне.

Неадаптированный брендовый цвет

Акцент выглядит грязным, слишком ярким или не проходит контраст.

Белые вспышки

Тема применяется после загрузки страницы.

Светлые системные формы

Не настроено свойство color-scheme.

Иконка без подписи

Пользователь не понимает, что переключает солнце, луна или полузакрашенный круг.

Выбор не сохраняется

На каждой странице тема возвращается к исходной.

Нет системного режима

Пользователь вынужден отдельно менять настройку сайта.

Переключатель недоступен с клавиатуры

Кнопка реализована как декоративный элемент без правильной семантики.

Фокус почти не виден

Тонкая серая рамка исчезает на поверхности.

Ссылки отличаются только цветом

Их сложно распознать внутри текста.

Графики используют цвета светлой темы

Подписи и линии становятся невидимыми.

Изображения автоматически затемняются

Искажаются товары и фирменные материалы.

Две темы имеют разные функции

Элемент случайно скрыт или не работает только в одном режиме.

Dark mode добавлен перед релизом

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

Тёмная тема заменяет редизайн

Плохая структура, слабая типографика и неудобная форма остаются плохими, только теперь на графитовом фоне.

Чек-лист дизайна тёмной темы

• Определена практическая задача.
• Изучены предпочтения аудитории.
• Проверен контекст использования.
• Созданы семантические цветовые токены.
• Определены уровни поверхностей.
• Основной текст проходит проверку контраста.
• Крупный текст проходит проверку контраста.
• Вторичный текст остаётся читаемым.
• Ссылки различимы без одного только цвета.
• Границы полей видимы.
• Иконки имеют достаточный контраст.
• Фокус заметен.
• Hover не скрывает компонент.
• Selected отличается от обычного состояния.
• Disabled не выглядит активным.
• Акцентные цвета адаптированы.
• Статусы различаются не только цветом.
• Логотип имеет подходящую версию.
• SVG адаптированы.
• Фотографии не искажены.
• Скриншоты проверены.
• Таблицы сохраняют структуру.
• Графики читаются.
• Код имеет доступную подсветку.
• Формы протестированы.
• Автозаполнение не ломает оформление.
• Системные элементы соответствуют теме.
• Настроен color-scheme.
• Поддерживается prefers-color-scheme.
• Есть ручной выбор.
• Есть режим «как в системе».
• Выбор сохраняется.
• Нет вспышки неправильной темы.
• Тема меняется без потери данных формы.
• Основное содержимое не зависит от темы.
• URL не дублируются.
• Мобильная версия проверена.
• Клавиатурная навигация работает.
• Масштабирование не ломает интерфейс.
• Проведено пользовательское тестирование.

Чек-лист разработки

• Цвета вынесены в переменные.
• Компоненты не используют случайные жёсткие цвета.
• Тема применяется к корневому элементу.
• Переключатель реализован кнопкой или подходящим контролом.
• Текущее состояние доступно вспомогательным технологиям.
• Системное предпочтение определяется корректно.
• Ручной выбор имеет приоритет.
• Изменение системной настройки обрабатывается.
• Настройка сохраняется.
• До загрузки применён правильный фон.
• Указан meta color-scheme.
• Настроено CSS-свойство color-scheme.
• Полоса прокрутки проверена.
• Формы браузера проверены.
• Автозаполнение проверено.
• Сторонние виджеты адаптированы.
• Карты проверены.
• CAPTCHA проверена.
• Cookie-баннер проверен.
• Чат проверен.
• Видеоэлементы проверены.
• Печатная версия не становится тёмной.
• Экспортируемые документы сохраняют читаемость.
• Нет лишнего дублирования CSS.
• Нет лишней загрузки изображений обеих тем.
• JavaScript находится во внешнем файле.
• Ошибки переключения отслеживаются.

Тёмная тема: тренд или польза

Dark mode является одновременно устойчивым направлением дизайна и полезной функцией. Ответ зависит не от цвета фона, а от причины внедрения.

Вывод

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

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

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

Для сайта желательно учитывать системное предпочтение через prefers-color-scheme, поддерживать системные элементы через color-scheme и предоставлять ручной выбор между светлой, тёмной и системной темой.

Если проект не имеет ресурсов на разработку, тестирование и дальнейшую поддержку двух цветовых схем, лучше сделать одну качественную тему. Плохо реализованный dark mode создаёт больше проблем, чем пользы, зато позволяет добавить в презентацию ещё один модный скриншот. Человечество, разумеется, и не такое переживало.

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