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

0
1647
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Мне нравится повсюду использовать темный режим. Но есть также люди, которые предпочитают светлый! Чтобы учесть предпочтения всех и подумать о доступности прямо со старта, я добавляю поддержку нативного светлого и темного режима сразу при начале нового веб-проекта.

В этом решении не используется 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».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here