Темная тема

Думаешь, тёмная тема это просто вывернутые цвета? Взял белый фон, сделал чёрным. Взял чёрный текст, сделал белым. И всё, готово.

Ага, щас. Всё не так просто. Я на этом сам чуть не погорел, когда делал тему для блога.

Шрифт

Первое, что бросается в глаза. Тёмный фон и светлый текст. Это называется негативный контраст. И тут начинается магия, о которой мало кто думает.

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

Я полез разбираться. Оказалось, это не мои глюки. В тёмной теме реально надо истончать начертание. Не утолщать, а наоборот, делать тоньше. Если в светлой теме у тебя заголовок жирный, в тёмной его надо чуть-чуть облегчить. Иначе он будет давить.

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

Почему так

Я нашёл объяснение. Оказывается, когда фон тёмный, а текст светлый, зрачок расширяется. И глаз хуже фокусируется на мелких деталях. Это называется сферическая аберрация. Звучит страшно, но суть простая: чем меньше шрифт, тем хуже он читается в тёмной теме. Причём в светлой теме такой проблемы нет. Там зрачок сужается, фокус становится лучше, и мелкий текст читается легче.

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

Цвета

Дальше. Чистый чёрный фон это ошибка. Я тоже так думал сначала. Чёрный есть чёрный, что может быть лучше.

А оказалось, чистый чёрный даёт слишком резкий контраст. Белый текст на нём не читается, а светится. Это называется гало вокруг букв. Глаза устают моментально. Текст как будто вибрирует.

Правильно использовать не чистый чёрный, а очень тёмный серый. Что-то вроде #121212 или #1a1a1a. Разница на глаз почти незаметна, но читать становится в разы комфортнее.

И текст не должен быть чисто белым. Тоже ошибка. Белый на тёмном это слишком ярко. Надо брать не #FFFFFF, а что-то ближе к #FAFAFA, чуть приглушённый. Мягче для глаз.

Слои

В светлой теме глубину показывают тени. Карточка над фоном, тень под ней. Всё понятно.

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

Если этого не делать, всё сливается в одно тёмное месиво. Не понять, где карточка, где фон, где что нажимается.

Контраст

Тут ничего не меняется. Есть стандарт, называется WCAG. Текст должен иметь контраст с фоном минимум 4.5 к 1. Для крупного текста можно 3 к 1. И это правило работает одинаково и для светлой, и для тёмной темы.

Я проверял. Гонял свой блог через анализатор. Нашёл пару мест, где было 4.2 вместо 4.5. Поправил. Мелочь, но лучше перебдеть.

Что я сделал у себя

У меня в блоге есть переключатель темы. Светлая, тёмная, авто. И слайдер размера шрифта.

Когда я добавил тёмную тему, я сразу сделал так: шрифт в ней чуть тоньше, чем в светлой. Не на много. Просто чтобы не давил. И фон не чёрный, а тёмно-серый. И текст не белый, а чуть приглушённый.

Это мелочи. На них никто не обращает внимания. Но именно из-за них читать комфортно. Ты не устаёшь. Ты не понимаешь почему, но тебе хорошо.

Правила хорошего тона

Если коротко, вот они. Не чистый чёрный, а тёмно-серый. Не чистый белый, а приглушённый. Шрифт тоньше, чем в светлой теме. Контраст не меньше 4.5 к 1. Слои показывать светлыми поверхностями, а не тенями.

И главное. Тестировать в реальных условиях. Тёмную тему люди используют ночью. При свете дня она выглядит не так, как в темноте. Поэтому проверять надо на пониженной яркости экрана. Как это будет в темноте, а не на солнце.

Вот и всё. Тёмная тема это не просто стили. Это отдельный мир, где всё по-другому. И если делать его на отвали, получится каша. А если подумать, получится комфорт.