prefers-color-scheme - это медиа-запрос CSS, который позволяет веб-разработчикам адаптировать стили и цветовую схему в зависимости от предпочтений пользователя относительно темной или светлой цветовой схемы. Этот медиа-запрос может быть полезен для создания адаптивных тем и оформления, которые автоматически реагируют на настройки цветовой схемы пользователя.
Для использования prefers-color-scheme в JavaScript, вы можете использовать объект window.matchMedia(), который позволяет проверить, соответствует ли текущая цветовая схема предпочтениям пользователя.
Вот пример кода, который показывает, как узнать текущее значение prefers-color-scheme:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Текущая цветовая схема - темная
console.log('Темная цветовая схема');
} else {
// Текущая цветовая схема - светлая
console.log('Светлая цветовая схема');
}
В этом примере мы используем window.matchMedia() с медиа-запросом (prefers-color-scheme: dark), чтобы проверить, соответствует ли текущая цветовая схема предпочтениям пользователя. Если соответствует, то выводим в консоль сообщение "Темная цветовая схема", в противном случае выводим сообщение "Светлая цветовая схема".
Вы можете использовать этот код, чтобы адаптировать стили и оформление вашего веб-сайта или приложения в зависимости от настроек цветовой схемы пользователя. Например, вы можете изменить фоновый цвет, цвет шрифта, цвет ссылок и другие стили, чтобы лучше соответствовать предпочтениям пользователя.
Имейте в виду, что поддержка prefers-color-scheme может различаться в разных браузерах и платформах. Поэтому перед использованием этого медиа-запроса рекомендуется проверить его поддержку в целевых браузерах и предоставить альтернативные стили или поведение, если медиа-запрос не поддерживается.