Тёмная тема давно перестала быть нишевой фичей для энтузиастов и превратилась в почти обязательный элемент современного сайта — многие пользователи включают тёмный режим в системных настройках и ожидают, что сайты будут его учитывать, особенно вечером или ночью.
Медиазапрос prefers-color-scheme позволяет узнать, какую тему предпочитает пользователь на уровне операционной системы, и применить соответствующие стили автоматически, без необходимости просить посетителя переключать тему вручную при первом визите на сайт.
CSS-переменные делают реализацию тёмной темы заметно проще, чем она была бы без них — вместо того чтобы переопределять десятки отдельных свойств цвета в медиазапросе, достаточно один раз объявить переменные вроде цвета фона и текста, а затем просто менять их значения внутри условия тёмной темы.
Ручной переключатель темы, не зависящий от системных настроек, тоже остаётся полезным — не все пользователи меняют системную тему в зависимости от времени суток, и возможность выбрать тему сайта независимо от остальной системы даёт больше контроля именно им.
При проектировании тёмной темы важно помнить, что простая инверсия цветов редко даёт хороший результат — чисто чёрный фон с чисто белым текстом часто выглядит слишком контрастным и утомляет глаза не меньше, чем недостаточный контраст в светлой теме, поэтому обычно выбирают более мягкие оттенки.
Изображения и иллюстрации тоже иногда нуждаются в отдельной версии под тёмную тему — яркий логотип на прозрачном фоне, задуманный под светлый фон, может потеряться или выглядеть неаккуратно на тёмной подложке без соответствующей адаптации.
Подробнее о реализации тёмной темы и связанном медиазапросе рассказано в статье про prefers-color-scheme на MDN.
