06Цвет и контрастиз архива
Тёмная тема в приложении: чистый чёрный или #121212?
Ярослав В. показал 10 января 2024
- Правки
- 4 правки
- Последняя
- 13 января 2024
- В разборе
принятой правки пока нет
кейс
Учусь, делаю для портфолио приложение-трекер тренировок с тёмной темой. Фон #000000, карточки #1c1c1c, текст белый, акцент ярко-салатовый #a6ff00. На макете смотрится круто, но когда листаю на телефоне, глаза устают, и текст будто дрожит. Чистый чёрный это ошибка? И как вообще выделять карточки на тёмном, тенями же не получится.
правка 1
Мы в команде прошлой осенью делали тёмную тему и наступили ровно на то же самое. По порядку.
Фон лучше не чистый чёрный, а #121212 или рядом. Чистый белый на чистом чёрном даёт максимальный контраст, на ярком экране буквы «светятся» и дрожат. Текст тоже не #ffffff, а 87-90% белого, вторичный около 60%.
Карточки выделяются не тенью, а светлотой: чем выше слой, тем светлее. Фон #121212, карточка #1e1e1e, всплывающее окно #2a2a2a.
Акцент #a6ff00 на тёмном слишком кислотный, на большой площади режет глаз. Для тёмной темы акцент обычно делают на тон-два спокойнее. Для кнопки с тёмным текстом салатовый можно оставить, а в иконках и графиках приглуши.
И проверь серый текст: на тёмном фоне его контраст падает быстрее, чем кажется по макету.
Фон лучше не чистый чёрный, а #121212 или рядом. Чистый белый на чистом чёрном даёт максимальный контраст, на ярком экране буквы «светятся» и дрожат. Текст тоже не #ffffff, а 87-90% белого, вторичный около 60%.
Карточки выделяются не тенью, а светлотой: чем выше слой, тем светлее. Фон #121212, карточка #1e1e1e, всплывающее окно #2a2a2a.
Акцент #a6ff00 на тёмном слишком кислотный, на большой площади режет глаз. Для тёмной темы акцент обычно делают на тон-два спокойнее. Для кнопки с тёмным текстом салатовый можно оставить, а в иконках и графиках приглуши.
И проверь серый текст: на тёмном фоне его контраст падает быстрее, чем кажется по макету.
правка 2
Цвета на тёмном визуально ярче, чем на белом. Салатовый, нормальный на светлой теме, на тёмной бьёт в глаза. Я акцент для тёмной темы подбираю отдельно, глядя на телефон на минимальной яркости в темноте, ведь трекером обычно пользуются вечером.
правка 3
Переделал: фон #121212, карточки на ступень светлее, текст 88% белого, акцент в графиках приглушил до #8fd400. Глаза перестали уставать, дрожание пропало. Слои светлотой сделал, как Гена описал, теперь видно, что поверх чего лежит. В кейс добавил экран «до и после».
правка 4
Экран «до и после» в кейсе про тёмную тему - очень хорошо, такое мало кто показывает.