В iOS 13.0 и более поздних версиях люди могут выбрать темную тему. В темной теме система использует более темную цветовую палитру для всех экранов, вьюшек, меню и контролов, а также использует большую цветовую насыщенность, чтобы контент переднего плана выделялся на более темном фоне. Темная тема поддерживает все возможности по доступности в том числе.
Темная тема
Светлая тема
В настройках пользователи могут выбрать Темную тему в качестве стиля интерфейса по умолчанию и запланировать автоматические изменения между светлой и темной темами. Поскольку люди делают этот выбор на системном уровне, они обычно ожидают, что все приложения будут уважать их предпочтения.
Соблюдайте выбор тем, который люди выбирают в настройках. Если вы предлагаете юзерам внутри вашего приложения какие-то настройки или отдельную тему, то вы создаете больше работы для людей, потому что им приходится настраивать более одного параметра. Хуже того, они могут подумать, что ваше приложение сломано, потому что оно не отвечает их выбору на уровне всей системы.
Проверьте свой дизайн как в светлой, так и в темной теме. Посмотрите, как выглядит ваш интерфейс в 2 вариантах, и отрегулируйте свои макеты по мере необходимости, чтобы они соответствовали каждой теме. Проекты, которые хорошо работают в одной теме, могут не работать в другом.
Убедитесь, что ваш контент остается удобочитаемым в темной теме, когда вы настраиваете параметры доступности контрастности и прозрачности. В темной теме вы должны протестировать свой контент с режимами Увеличения контрастности и уменьшения прозрачности, как по отдельности, так и вместе. Вы можете найти места, где темный текст менее читаем, когда он находится на темном фоне. Вы также можете обнаружить, что включение увеличения контрастности в темной теме может привести к снижению визуального контраста между темным текстом и темным фоном. Хотя люди с хорошим зрением все еще могут считать текст с низким контрастом, такой текст может быть неразборчив для людей с ограниченными возможностями зрения.
Цветовая палитра в темной теме имеет более темные цвета фона и более светлые цвета для всего контента переднего плана, которые тщательно подобраны для обеспечения контрастности при сохранении единообразия между темами и приложениями.
В темной теме система использует два набора фоновых цветов - базовый и приподнятый — для улучшения восприятия глубины, когда один темный интерфейс накладывается на другой. Базовые цвета темнее, из-за чего кажется, что интерфейсы на фоне как бы снижаются или отдаляются, а приподнятый набор цвета светлее, из-за чего кажется, что интерфейсы переднего плана возвышаются или выходят на передней план.
<aside> 📌 От автора: не знаю как лучше перевести elevated (приподнятый) набор цветов.
</aside>
Используйте системные цвета фона. Темная тема динамическая, что означает, что цвет фона автоматически меняется с базового на приподнятый набор, когда интерфейс находится на переднем плане, например, всплывающее окно или модальный лист. Система также использует приподнятый цвет фона для передачи визуального разделения между приложениями в многозадачном оеэиме и между окнами в режиме работы с несколькими окнами. Использование кастомных цветов может затруднить восприятие людьми этих системных визуальных различий.
Используйте динамические цвета, которые адаптируются к текущей теме. Семантические цвета, такие как цвет для разделителей, автоматически адаптируются к текущей теме. Если вам нужен кастомный цвет, то добавьте его в набор в каталог ресурсов вашего приложения и укажите варианты для светлой и темной темы, чтобы он мог адаптироваться к текущим настройкам. Избегайте жесткой привязки значений цвета или цветов, которые не адаптируются к системным настройкам.
Базовый набор
Приподнятый набор
Светлый
Обеспечьте достаточный цветовой контраст в темах. Использование системных цветов обеспечивает надлежащее соотношение контрастности между вашим конетнтом переднего плана и заднего. Для кастомных цветов стремитесь к соотношению контрастности 7:1, особенно для текста меньшего размера.
Смягчите цвет белого фона. Если вы почему-то обязаны использовать белый фон для контента в темной теме, то выберите оттенок темнее, чем чистый белый цвет, чтобы фон не светился на фоне окружающего темного контента.
Система использует иконки из библиотеки SF, которые автоматически отлично смотрятся в темной теме, и полноцветные изображения, оптимизированные как для светлой, так и для темной тем.
Используйте иконки SF везде, где это возможно. Иконки отлично смотрятся во всех темах, когда вы используете динамические цвета для их оттенка или когда вы добавляете эффект повышенной насыщенности (vibrancy).
При необходимости создавайте собственные иконки или варианты из библиотеки SF для светлой и темной тем. Иконка, которая выполнена с помощью обводки в светлой теме - это хорошо, но будет лучше использовать заливку и сплошную форму для темной темы.
Убедитесь, что полноцветные изображения и иконки выглядят хорошо. Используйте один и тот же ресурс, если он хорошо выглядит как в светлой, так и в темной теме. Если ассет (ресурс) хорошо выглядит только в одной, то измените его или создайте отдельные его варианты для темной и светлой тем.