√ Светлый и темный режим всего в 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 — как черный, если в системных настройках обнаружена светлая тема.

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

Вот и все! Теперь у нас есть нативная поддержка светлого и темного режима, реализованная всего в 14 строках CSS!

Пример на CodePen

Полный рабочий пример вы можете посмотреть на CodePen. Там светлый и темный режим будут переключаться в зависимости от ваших системных настроек. Чтобы это увидеть, попробуйте изменить режим в настройках.

——————————————————————————————————

🗣 Сообщество · @win_prog (WinProg ┃ News ➢ Programming) ·

📌 Сообщество ВК ┃ vk.com/win_prog

📌 Телеграм канал ┃ t.me/win_programs