До сих пор, в зависимости от предпочтения темы — светлая или темная — установленная в Windows 10 или MacOS, Mojave, Chrome, Firefox, Opera или другой браузер синхронизирует и мгновенно меняет пользовательский интерфейс своего браузера. Как насчет того, чтобы веб-сайты становились темными, когда в настройках вашей ОС задано значение темной темы? Интересно! Это возможно с помощью медиа-запросов: Prefers-color-scheme, которую поддерживают Firefox 67 и Chrome 76.
CSS Prefers для Media Queries — цвет-схема определяет, предпочитает ли пользователь светлую или темную тему. Safari Technology Preview 68 впервые реализовала это, и Google Chrome работает над этим [обновление: добавлена последняя информация об этом ниже], в то время как Mozilla, выпускающая Firefox 67, выпуск которого запланирован на 14 мая, уже реализовала эту функцию для своего браузера.
Chrome для отправки мультимедийной функции CSS Prefers-Color-scheme
Google объявила сегодня, что будет поставлять цветовую схему Prefers для браузера Chrome для всех платформ Blink: Windows, Mac, Linux, Chrome OS, Android и Android WebView.
Эта функция будет поддерживаться, но в зависимости от платформы пользователю необходимо изменить тему с помощью настройки. Например, в Windows, Mac и Android Q пользователю необходимо изменить тему с помощью системных настроек, а для других платформ пользователь должен полагаться на аргумент командной строки –force-dark-mode. Вот связанная ошибка для Chrome и ссылка на страницу ввода статуса платформы Chrome.
Для вашего веб-сайта с помощью медиа-запросов prefers-color-scheme вы можете указать три значения: без предпочтений, темный или светлый.
Согласно веб-документации MDN, отсутствие предпочтений означает, что пользователь не сделал никаких предпочтений, известных системе.
light: указывает, что пользователь уведомил систему о том, что он предпочитает интерфейс с светлой темой.
dark: указывает, что пользователь уведомил систему о том, что он предпочитает интерфейс с темной темой.
Если вы используете Firefox 67 или Firefox 68 Nightly, браузер уже поддерживает, и вы можете проверить эту демонстрационную ссылку. Ниже мы разместили гифку, в которой показано, как эта функция работает в Chrome. Обратите внимание, вам нужно запустить Chrome Canary с указанным ниже аргументом командной строки.
—enable-blink-features = MediaQueryPrefersColorScheme
ОБНОВЛЕНИЕ 6 мая 2019 г .: Google Chrome 76 теперь официально поддерживает функцию медиа-запроса prefers-color-scheme, и вы можете увидеть, как эта функция работает в обновленном гифке выше, и вам не нужно передавать аргумент командной строки. Связанная ошибка была исправлена, а целевой настройкой стал Chrome 76. Чтобы проверить ее, просмотрите этот пример в последней версии Chrome Canary.
