Тёмная тема

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

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

Тёмная тема (Dark Mode) это способ показывать экраны сайта или приложения с тёмным фоном и светлым текстом и значками вместо привычного чёрного текста на белом. Содержание остаётся прежним: те же кнопки, те же меню, те же слова. Меняются только цвета, чтобы экран был мягким для глаз, когда вокруг мало света.

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

Как работает тёмная тема?

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

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

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

Почему тёмная тема важна для вас?

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

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

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

Светлая и тёмная тема: сравнение

Как сделать тёмную тему, удобную для глаз

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

1. Тёмно-серый вместо чисто чёрного: полный чёрный рядом с ярким белым даёт резкий контраст, от которого устают глаза. Тёмно-серый или тёмно-синий фон спокойнее.
2. Светлый, но не ослепительный текст: белый с лёгким серым оттенком читать удобнее, чем чисто белый.
3. Достаточный контраст: контраст это разница между цветом текста и цветом фона. Если она слишком мала, читать трудно, особенно пожилым людям и тем, кто плохо видит. Стандарт доступности WCAG задаёт для этой разницы минимум.
4. Более мягкие фирменные цвета: яркий синий или красный выглядит на тёмном фоне кричаще, и ему нужен чуть более спокойный оттенок.
5. Логотип и картинки для обоих фонов: чёрный логотип пропадает на тёмном фоне, поэтому нужна светлая версия. Очень яркие фото иногда стоит немного приглушить.
6. Таблицы и графики: в панелях нужно проверить цвета столбцов и линий, чтобы они оставались понятными в обоих режимах.

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

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

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

В Linkysoft мы закладываем тёмную тему с первого дня дизайна, а не после его завершения. Каждый сайт, который мы создаём в рамках услуги дизайн и разработка сайтов, получает встроенную тёмную тему, поддержку арабского языка и письма справа налево (RTL) и стандарт доступности WCAG 2.2. Перед запуском мы проверяем его на настоящих телефонах.

В разработке мобильных приложений мы проектируем каждое приложение с нуля со светлой и тёмной темой и доступными экранами, для iPhone и Android. Потом публикуем его в App Store и Google Play и следим за обновлениями.

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

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