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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Как обычно, 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 запрос, но это неуклюжий и тратит пространство. Если вы должны поддерживать каждый существующий браузер, используйте вместо этого запасной вариант с двойным свойством.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.