От автора: добавление поддержки «темного режима» на веб-сайта или в приложение становится все более популярным среди разработчиков. Предоставление пользователям возможности выбора темной темы может быть полезным для доступности, так как некоторые люди испытывают головные боли или визуальные затруднения из-за слишком ярких экранов, или же испытывают затруднения при длительном чтении на светлом фоне.
Медиа-запросы
Благодаря спецификации Media Queries уровня 5 реализация стилей темного режима для пользователей, предпочитающих его, относительно проста. Используя медиа-запрос prefers-colour-scheme, мы можем указать, как веб-сайт должен выглядеть для пользователей, которые выбрали в системных настройках предпочтение темной цветовой схемы:
@media (prefers-color-scheme: dark) { /* Dark mode styles go here! */
}
В качестве альтернативы мы могли бы пойти другим путем и реализовать стили темного режима по умолчанию, а затем переопределить их для пользователей, которые специально выбрали схему светлого цвета или у которых нет предпочтений.
@media (prefers-color-scheme: light) { /* Light styles */
} @media (prefers-color-scheme: no-preference) { /* Styles */
}
Очевидно, что вам все еще придется столкнуться с проблемой написания стилей CSS! Недавно я решил реализовать тёмный режим на этом сайте, и благодаря пользовательским свойствам CSS я смог сделать это довольно быстро и безболезненно.
Передача переменных SCSS в пользовательские свойства
Первым шагом к реализации темного режима было изменение кода для использования пользовательских свойств для любых цветов вместо переменных Sass. Как ни странно, это была самая сложная часть, поскольку она требует переименования переменных — причины скоро станут вам понятны! Рефакторинг основного или фирменного цвета довольно прост:
$primary: deeppink;
преобразуется в:
:root { --primary: deeppink;
}
Но для других переменных потребовалось подумать немного больше. Одной из таких переменных является $bg-light, которая определяет цвет светлого фона сайта. Чтобы реализовать темный режим, нам нужно поменять цвет фона на более темный, используя то же имя переменной — больше не имеет смысла вызывать —bgLight, когда цвет, который она представляет, не является светлым!
У меня есть три основных цвета фона, поэтому я остановился на следующем:
:root { --primary: deepPink; --headerBg: #1d1d26; --textColor: #0e0f0f; --textColorInverse: #fcfdff; --bg: #fcfdff; --bgTint: #dfeded; --bgGrey: #e6e8e8; --white: #fcfdff;
}
Это максимизирует возможность повторного использования переменных, в то же время сохраняя интуитивность того, что они представляют.
Переопределение переменных для темного режима
После этого все, что мне нужно было сделать, это переопределить переменные для схемы темного цвета. Некоторые переменные, такие как фон заголовка и цвет —primary, вообще не нуждаются в изменении, а остальная цветовая палитра довольно ограничена. Поэтому у меня было только несколько пользовательских свойств, которые нужно было обновить для темной темы:
:root { --primary: deepPink; --headerBg: #1d1d26; --textColor: #0e0f0f; --textColorInverse: #fcfdff; --bg: #fcfdff; --bgTint: #dfeded; --bgGrey: #e6e8e8; --white: #fcfdff;
} @media (prefers-color-scheme: dark) { :root { --bg: #161618; --bgTint: #27272c; --textColor: #dbd7db; --bgGrey: #27272c; --textColorInverse: #0e0f0f; }
}
Это фактически весь код, необходимый для реализации темной темы! Чтобы проверить тему, я могу зайти в настройки системы и изменить настройки цвета на «темные». На Mac они задаются в Системные настройки> Общие> Внешний вид.
Следующие шаги
Прямо сейчас пользователи сайта получат темную тему, если установили в системных настройках внешний вид «темный», но они не смогут изменить это — по крайней мере, не возвращаясь к системным настройкам, что крайне непрактично. Это не идеально, поскольку некоторые пользователи могут предпочесть темный режим в целом, но для определенного веб-сайта они предпочитают светлую цветовую схему. Очевидно, что предоставление пользователям выбора является предпочтительным решением.
Энди Белл написал отличную статью о том, как добавить переключатель, который позволяет пользователю выбирать предпочитаемую цветовую схему, используя localStorage для сохранения предпочтений. Это то, что я хотел бы реализовать в скором времени.
Автор: Michelle Barker
Источник: https://css-irl.info
Редакция: Команда webformyself.
