Как настроить темную тему для вашего сайта

В Chrome 76 добавлена поддержка медиа-запроса prefers-color-scheme CSS, который позволяет веб-сайтам запрашивать у вашей операционной системы, какую цветовую схему вы предпочитаете, чтобы они могли выбрать соответствующую тему. Вот как настроить его для вашего веб-сайта.

Какие браузеры поддерживают темные темы?

На момент написания большинство основных браузеров поддерживают темный режим, хотя некоторые браузеры еще не были обновлены для его поддержки. Вы можете проверить текущий статус на caniuse.com, который создает таблицу поддержки для разных браузеров:

Как обычно, IE 11 не получает никаких обновлений, и те 2% пользователей Интернета, которые все еще застряли на нем, не смогут его использовать. Но эти люди, скорее всего, не используют Windows 10, поэтому они все равно не увидят никакой пользы без переключения темной темы.

К счастью, использование prefers-color-scheme не нарушит ваш CSS, так как это необязательный параметр.

Как использовать поддержку цветовой схемы CSS

Чтобы на самом деле использовать prefers-color-scheme в своем CSS, вы должны использовать его как необязательный медиа-запрос, так же, как и для адаптивного дизайна. Например, если по умолчанию используется белый фон с черным текстом, вы можете использовать медиа-запрос, чтобы изменить его на черный фон и белый текст.

body {
  background-color: #fff;
  color:#000;
}

@media (prefers-color-scheme: dark) {
  background-color: #000;
  color:#fff;
}

Вы можете комбинировать это с любым другим методом, который вы используете — например, вы можете разрешить темный режим на мобильных устройствах только в сочетании с адаптивным медиа-запросом для размера экрана.

Настройте темную тему с помощью переменных CSS

Переменные CSS — довольно новое дополнение с широкой поддержкой. Это, пожалуй, самый простой способ создать темную тему вместе с prefers-color-scheme. Вместо того, чтобы определять значения цвета вручную, например:

body {
  background-color: #fff;
}

p {
  color: #000;
}

Вместо этого создайте блок :root, который будет применяться везде. Здесь вы можете определить переменные, используя двойной дефис (--), за которым следует имя переменной. Затем, когда вам нужно определить значение, вместо этого используйте имя переменной внутри функции var() :

:root {
  --primary: #000;
  --background: #fff;
}

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

p {
  color: var(--primary);
}

Преимущество этого метода в том, что он может изменять эти переменные, и изменения отражаются везде. Сразу под блоком :root добавим еще один внутри мультимедийного запроса prefers-color-scheme:

:root {
  --primary: #000;
  --background: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ddd;
    --background: #222
  }
}

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

p {
  color: var(--primary);
}

Это сбрасывает переменные к темным значениям, если браузер обнаруживает, что пользователь предпочитает темную схему. Вы можете управлять этими двумя палитрами цветов и легко настраивать их, просто изменяя переменные.

Кроме того, если вам нужен дополнительный CSS для темной темы, вы можете поместить его в другой запрос prefers-color-scheme , хотя вы, вероятно, захотите разместить его ниже остальной части CSS, чтобы он имеет приоритет или используйте флаг !important.

Резервный вариант для IE 11

IE 11 не поддерживает это (очевидно). Если вы хотите обеспечить поддержку IE 11, вы можете использовать старый метод удвоения ваших свойств:

p {
 color: #000;
 color: var(--primary);
}

Таким образом, IE 11 обработает только первый, а второй увидит недопустимый CSS. Темные темы не будут работать, но они в любом случае не будут работать, так как нет поддержки медиазапроса.

Кроме того, если вы вообще не хотите использовать переменные CSS, вы можете просто полностью изменить стиль своего сайта в запросе prefers-color-scheme , но это неуклюже и занимает много места. Если вам необходимо поддерживать все существующие браузеры, вместо этого используйте запасной вариант свойства double.