Как спроектировать тёмную тему сайта и проверить состояния элементов

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

Что должно получиться

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

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

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

Из чего это складывается

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

Как это сделать по шагам

1. Соберите состояния. Выберите характерные страницы и выпишите элементы, которые меняются при работе: раскрытое меню, ошибка формы, пустой список, диалог и ожидание действия.
2. Опишите роли цветов. Отделите фон, поверхности, основной текст, вспомогательный текст, границы, акцент и сообщения. Для каждой роли определите назначение в обеих темах.
3. Подготовьте тёмный вариант. Подберите значения по ролям, сохранив смысл и уровни интерфейса. Проверьте их на реальном содержимом, включая длинные подписи и ссылки.
4. Проверьте контраст. Измерьте фактические пары текста и фона, важные графические признаки и состояния элементов. Не ограничивайтесь главным заголовком.
5. Проверьте изображения и встроенные блоки. Откройте логотип, иконки, диаграммы и внешние виджеты. Определите, где нужна отдельная версия или собственная поверхность.
6. Согласуйте выбор темы. Опишите, как учитывается системное предпочтение, что делает ручной выбор и что происходит при следующем посещении.
7. Проверьте переключение в работе. Пройдите форму, меню и диалог в обеих темах. Смена оформления должна сохранять текущие данные и понятное управление.
8. Передайте правила в реализацию. Зафиксируйте роли, значения, состояния и исключения. После разработки проверьте живые страницы: макет не подтверждает правильность загруженных стилей и виджетов.

Поверхности и глубина интерфейса

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

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

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

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

Текст, ссылки и состояния управления

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

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

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

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

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

Изображения, графики и внешние блоки

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

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

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

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

Системная настройка и ручной выбор

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

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

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

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

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

Что нужно проверить после реализации

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

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

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

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

Частые ошибки

• Инвертировать всю страницу. Фотографии и знаки меняются вместе с интерфейсом, хотя их смысл должен сохраниться.
• Проверить только спокойный экран. Ошибки, меню, диалоги и выбранные пункты могут остаться неподготовленными.
• Сделать вспомогательный текст почти невидимым. Проверяйте его на реальном размере и фоне.
• Перезаписывать ручной выбор системным. Приоритет настроек должен соответствовать описанному поведению.
• Объявить тему готовой по макету. Реализация может использовать другие ресурсы, нативные элементы и порядок загрузки.

Как проверить

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

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

Вопросы и ответы

Достаточно заменить белый фон чёрным?

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

Тёмная тема автоматически улучшает доступность?

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

Нужно делать отдельные фотографии для тёмной версии?

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

Что важнее: выбор пользователя или настройка системы?

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

Почему стандартные поля остались светлыми?

Проверьте color-scheme и стили конкретных элементов. Нативные части браузера и ваши собственные блоки могут оформляться разными механизмами. Согласуйте оба уровня и проверьте фактический результат.

Можно хранить выбор только в localStorage?

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

Как понять, что тема готова к выпуску?

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