Услуги Портфолио Команда Академия Блог Связаться

Dark Mode дизайн: интерфейс, щадящий глаза

1,204 1 мин

Dark mode становится всё более любимой функцией пользователей. Однако просто инвертировать дизайн светлого режима неправильно. Тёмные поверхности должны иметь уровни: 0dp elevation → #121212, 1dp → #1E1E1E, 2dp → #232323 и так далее. Тени не затемняются — для выражения elevation используются слегка более светлые цвета.

В типографике чистый белый (#FFFFFF) утомляет глаза — лучше #E8EAED или rgba(255,255,255,0.87). Цвета тоже нужно переработать для dark mode: рекомендуется, чтобы один и тот же акцентный цвет был насыщенным в светлом режиме и более светлым в тёмном. CSS prefers-color-scheme и свойство color-scheme упрощают реализацию.

Наши курсы по этой теме
Поделиться