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

2 апреля 2020 г. ≈ 38 секунд

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

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

С чего начать?
1) Адаптировать фон и простые элементы вёрстки
2) Адаптировать логотип и пиктограммы
3) Адаптировать изображения на страницах

С чего начать специалисту по вёрстке сайта?
1) Мета-тег `color-scheme`
2) Медиа-запрос `prefers-color-scheme: dark`

Если сайт отправляет письма подписчикам, их тоже можно адаптировать для поддержки тёмного режима. Схема такая же. Для тестирования и отладки можно использовать web-версию письма.

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

и получите в подарок концепт одного элемента дизайна для своего сайта!

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