Мне нравится повсюду использовать темный режим. Но есть также люди, которые предпочитают светлый! Чтобы учесть предпочтения всех и подумать о доступности прямо со старта, я добавляю поддержку нативного светлого и темного режима сразу при начале нового веб-проекта.
В этом решении не используется JavaScript, поскольку мы создаем не переключатель режимов. Этот код будет выявлять системные настройки пользователя при помощи медиа-запросов CSS и таким образом определять базовую цветовую схему. Давайте рассмотрим, как это сделать.
Объявляем два пользовательских свойства CSS
Пользовательские свойства CSS также известны как CSS-переменные. Вы можете объявить их где угодно в своих CSS-файлах, и они будут следовать тем же паттернам каскада и специфичности, что и другие CSS-правила.
Например, вы можете объявить CSS-переменные в корне документа и перезаписывать их более специфичными CSS-классами. Здорово то, что объявленные переменные можно просматривать и заниматься их отладкой в инструментах разработчика в браузере.
Имена пользовательских свойств имеют по два дефиса спереди, а доступ к ним обеспечивается при помощи функции var().
:root {
--my-color-variable: #000000;
}
.element {
/* This is calculated as #000000! */
color: var(--my-color-variable);
}
В функцию var() также можно передать второй параметр, который будет играть роль запасного значения на случай, если на момент вызова пользовательское свойство не будет существовать.
.element {
color: var(--my-new-color, #ff0000);
}
Но вернемся к нашей теме. Мы определяем две переменные цвета в корне документа. Одну — для цвета переднего плана (foreground), а вторую — для заднего (background). Я склонна использовать темный режим по умолчанию, поэтому делаю цвет заднего плана (--color-bg) черным, а переднего (--color-fg) — белым.
:root {
--color-bg: #000000;
--color-fg: #ffffff;
}
Использование медиа-запроса prefers-color-scheme
Дальше мы будем подтягивать системные настройки при помощи медиа-запроса prefers-color-scheme и переключать объявления переменных для цветов переднего и заднего плана.
Следующий код устанавливает --color-bg как белый, а --color-fg — как черный, если в системных настройках обнаружена светлая тема.
@media (prefers-color-scheme: light) {
:root {
--color-bg: #ffffff;
--color-fg: #000000;
}
}
Добавляем стили в body
Наконец, применяя пользовательские свойства, установим background-color (для цвета страницы) и color (для текста) в HTML-элементе body. Эти свойства, если не будут перезаписаны, будут унаследованы всеми элементами-потомками.
body {
background-color: var(--color-bg);
color: var(--color-fg);
}
Вот и все! Теперь у нас есть нативная поддержка светлого и темного режима, реализованная всего в 14 строках CSS!
Пример на CodePen
Полный рабочий пример вы можете посмотреть на CodePen. Там светлый и темный режим будут переключаться в зависимости от ваших системных настроек. Чтобы это увидеть, попробуйте изменить режим в настройках.
See the Pen Light mode/dark mode in 14 lines of CSS by whitep4nth3r (@whitep4nth3r) on CodePen.
Перевод статьи «Light and dark mode in just 14 lines of CSS».
