Оскар Хейн
В последние версии MacOS (MOJAVE) и Windows 10 пользователи смогли включить в систему уровне темного режима. Это хорошо работает и легко обнаружить для нативных приложений.
Сайты были странными приложениями, где он должен, издателя сайта, чтобы решить, какую цветовую схему следует использовать пользователи. Некоторые веб-сайты предлагают тему поддержки. Для переключения пользователей они должны найти конфигурацию для него и вручную обновлять настройки для каждого отдельного веб-сайта.
Было бы возможно, чтобы это обнаружение было сделано автоматически, и у вас есть веб-сайты, которые уважают предпочтения пользователя?
CSS Media Query ‘Prefers-Color-Scheme’
Есть CSS Media queries Praving 5, где Предпочитает-цветную схему указан. Он предназначен для обнаружения, запросил ли пользователь системы для использования света или темной цветовой темы.
Это звучит как то, с чем мы можем работать! Мы должны оставаться в курсе любых изменений в проекте, хотя, поскольку он может измениться в любое время, поскольку это просто … Проект. Предпочитает-цветную схему Запрос может иметь три разных значения: свет , темный и Нет предпочтения .
Поддержка веб-браузера по состоянию на март 2019 года
Текущая поддержка браузера – Очень Ограничено, и это не доступно ни в одном из стабильных выпусков любого поставщика. Мы можем только наслаждаться этим в Технология Safari Preview версии 12.1 и в Firefox 67.0A1 Отказ Что отлично, так это то, что есть двоичные файлы, которые его поддерживают, поэтому мы можем работать с ним и попробовать его в веб-браузерах. Для текущей поддержки браузера проверить https://caniuse.com/#search=prefers-color-scheme Отказ
Почему CSS только обнаружение недостаточно
Общий подход, который я видел до сих пор, это использовать только CSS только подход и переопределить правила CSS для определенных классов при соположении медиа-запроса. Что-то вроде этого:
/* global.css */
.themed { display: block; width: 10em; height: 10em; background: black; color: white;}@media (prefers-color-scheme: light) { .themed { background: white; color: black; }}Как это работает нормально для многих случаев использования, есть методы стиля, которые не используют CSS таким образом, как это. Если Стильные компоненты Для тематики используется для тематики, например, то объект JS заменен, когда тема изменяется.
Имея доступ к предпочтительной схеме также полезно для аналитики и более предсказуемых переопределений CSS, а также более мелкозернистый контроль над тем, какие элементы должны быть тематическими.
Первоначальный подход JS
В прошлом я узнал, что вы можете сделать обнаружение медиа-запросов, установив CSS Содержание элемента к значению, если медиа-запрос совпадает. Это определенно хак, но это работает!
Что-то вроде этого:
Таким образом, когда пользователь загружает CSS и средства массовой информации, соответствует одному из вышеперечисленных цветовых схем, Содержание Значение свойств HTML Элемент устанавливается на «свет», либо «темно».
Тогда вопрос, как мы читаем содержание Значение HTML элемент?
Мы можем использовать window.getcomputedstyle , нравится:
И это работает нормально! Этот подход в порядке для разовая читаю , но это не реагирует и автоматически обновляется, когда пользователь меняет системную цветовую схему. Чтобы быть обновленным, необходима перезагрузка страницы (или выведен выше, прочитанный на интервале).
Реактивный подход JS
Как мы можем знать, когда пользователь меняет системную цветовую схему? Есть ли события, которые мы можем слушать?
Да это так!
Есть window.matchmedia Доступно в Современные веб-браузеры Отказ
Что отлично с MatchMedia Это то, что мы можем прикрепить слушатель к нему, который будет вызван в любое время изменения в матче.
Слушатель будет вызываться с объектом, содержащим информацию, если медиа-запрос начал соответствовать или, если он перестал совпадать. С этой информацией мы можем совсем пропустить CSS и просто работать с JS.
Этот подход работает очень хорошо в поддерживаемых веб-браузерах и просто выходит, если window.matchmedia не поддерживается.
Реактивный крюк
Так как мы используем реагирование в Neo4j-браузер Я написал это как пользовательский реактивный крюк, чтобы облегчить восстановление во всех наших приложениях и вписываться в систему RACT.
Это немного больше кода, чем в первом короткой доказательстве концепции. У нас есть лучшие обнаружения ошибок, и мы также удаляем слушатели событий, когда подключен крюк.
В нашем случае пользователи могут выбрать переопределить автодеректированную схему с чем-то другим (мы предлагаем описанную тему, например, часто используемую при выполнении презентаций).
А затем используйте это как это в слое приложений:
Последняя часть зависит от того, как теминование производится в вашем приложении. В приведенном выше примере объект данных темы передается в поставщик контекста, который делает этот объект в течение всего приложения React.
Конечный результат
Вот GIF с конечным результатом, и, как видите, это мгновенно.
Последние мысли
Это был веселый эксперимент, сделанный во время так называемого «лабораторного дня», у нас в команде UX на Neo4j Отказ Ранние этапы спецификации и (следовательно) отсутствие поддержки браузера не оправдывает это, чтобы сделать его в любом продукте. Но поддержка может прийти раньше, чем позже.
И кроме того, мы отправляем некоторые электронные продукты, и есть Electron.systempreferences.isdarkmode () Доступно там …
Об авторе
Оскар Хейн Лидерская команда/старший инженер в Neo4j Отказ Он работает на нескольких библиотеках Neo4j: S концевой пользователей и библиотек кодовых библиотек и создал две технические книги.
Следуйте в Оскаре в Twitter: @oskarhane.
Оригинал: “https://www.freecodecamp.org/news/how-to-detect-a-users-preferred-color-scheme-in-javascript-ec8ee514f1ef/”