Светлый и темный режим всего в 14 строках CSS

Мне нравится повсюду использовать темный режим. Но есть также люди, которые предпочитают светлый! Чтобы учесть предпочтения всех и подумать о доступности прямо со старта, я добавляю поддержку нативного светлого и темного режима сразу при начале нового веб-проекта. В этом решении не используется 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. Там светлый и темный режим будут переключаться в зависимости от ваших системных настроек. Чтобы это увидеть, попробуйте изменить режим в настройках.