Темная сторона в нашей крови - темный режим на ваших страницах с использованием фильтров CSS
Переехала на мой личный сайт. Прочтите без платного доступа в http://willmendesneto.com/posts/dark-side-is-in-our-blood-dark-mode-in-you-pages-using-css-filters
TL; DR; воспользуйтесь этими советами и установите темный режим в своем веб-приложении. Вы можете найти запрос на добавление изменений в этой ссылке. Наслаждайтесь! 🎉
Темный режим и веб-доступность: уважение к выбору пользователя
Мы видим несколько страниц с темной темой, доступной для пользователей. Этот подход не ограничивается только дизайном, но также охватывает удобство использования и доступность.
Один из самых популярных ответов, когда вы спрашиваете кого-то, кто использует опцию темного режима в своих веб-приложениях и / или своих ОС - операционных системах, - это то, что это помогает моим глазам или даже элегантно / аккуратно / красиво. Однако в документации для разработчиков темного режима прямо сказано: выбор между темным или светлым внешним видом является эстетическим для большинства пользователей и может не иметь отношения к условиям окружающего освещения.
Кроме того, люди с ослабленным зрением также могут иметь некоторые преимущества, если они предпочитают светлый текст на темном фоне путем инвертирования цветов на дисплее, за исключением изображений, мультимедиа и некоторых приложений, которые используют стили темного цвета. Это означает, что ваше веб-приложение должно поддерживать темный режим, если вы думаете и ориентируетесь на доступность.
Это больше, чем выбор, мы собираемся создать сеть для всех.
Темный режим через медиа-запрос CSS
Думая о сети как о мощной платформе, мы должны ожидать легкой и простой интеграции. В этом разделе мы углубимся в медиа-запрос prefers-color-scheme и то, как мы можем использовать CSS для поддержки темного режима.
Медиа-функция prefers-color-scheme может определять, запрашивал ли пользователь страницу, чтобы использовать светлую или темную цветовую тему, через конфигурацию операционной системы. Он принимает значения light или dark для уведомления страницы, если текущий пользователь выбирает страницу со светлой или темной темой.
Один из распространенных подходов, используемых для реализации этой функции, - это добавление CSS-фильтра на вашу страницу. Когда вы добавляете фильтр CSS invert (), когда он темный, а фон белый, а текст черный, он инвертирует цвета.
Пожалуйста, проверьте поддержка браузером CSS-фильтра в списке поддержки вашего браузера перед его использованием.
В конце, когда в пользовательской системе включен темный режим, страница применяет правила, добавленные внутри содержимого медиа-запроса, поэтому фон станет черным, а текст - белым.
Динамический Javascript темного режима
Ваши страницы могут интегрировать темный режим с использованием Javascript в качестве комбинации для этого. Важно понимать, что CSS и Javascript будут использовать разные разделы памяти в вашем браузере, поэтому ваши пользователи могут получить некоторые преимущества в производительности и удобстве использования, комбинируя оба подхода.
Изменение темы путем добавления классов CSS
Прежде всего, давайте добавим переключатель на страницу, чтобы дать пользователю возможность переключаться между светлым и темным режимами. Поэтому, когда по нему щелкают, страница будет темной и по умолчанию будет использоваться светлая тема.
Это разметка HTML для переключателя, который будет добавлен на вашу страницу.
Кроме того, нам нужно внести некоторые изменения в наш CSS. Теперь в нем также есть классы для определения того, является ли текущая тема на странице светлой или темной, путем добавления классов светлый режим и темный режим и стили для переключателя-переключателя элемента в наш HTML-элемент. Это будет CSS с этими изменениями.
После этих изменений давайте напишем Javascript для управления и добавления класса на нашу страницу. Во-первых, мы должны проверить, доступно ли window.matchMedia в браузере пользователя. Если это так, мы можем начать манипуляции с javascript.
Во-вторых, он должен проверять, включен ли темный режим через ОС при загрузке страницы, чтобы он мог добавить класс темного режима и активировать переключатель на переключателе. Если он поддерживается, мы проверим, есть ли у элемента HTML уже какой-либо класс (при загрузке страницы у него не будет никакого класса), поэтому он добавляет или переключается между классами светлого и темного режима и запускает изменение на переключателе, чтобы сохранить выровнено с текущим состоянием темы.
Еще один хороший момент на этом этапе - он должен изменить содержимое Switch Toggle, чтобы оно было видимым, если браузер поддерживает его. В противном случае он будет скрыт через CSS.
Это последний этап интеграции Javascript.
И это результат включения и выключения темного режима на вашей странице.
Прослушивание изменений темного режима в ОС
Теперь мы можем немного изменить наш файл javascript на Добавляет слушателя для изменений темного режима через пользовательские системные настройки. Мы можем повторно использовать предыдущее значение для метода matchMedia и добавить слушателя к изменениям.
Добавление лучших событий
Еще одно улучшение, которое вы можете применить, - это использовать лучший прослушиватель событий для текущего пользовательского устройства с помощью touchstart, если это мобильное устройство. В противном случае он сработает на основе события click.
Со всеми этими изменениями это будет последняя версия файла Javascript.
Переехала на мой личный сайт. Прочтите без платного доступа в http://willmendesneto.com/posts/dark-side-is-in-our-blood-dark-mode-in-you-pages-using-css-filters
Это все пока
Было здорово написать этот пост в блоге и увидеть эволюцию Интернета как платформы и то, как быстро вы можете делать такие удивительные вещи - и даже больше, если хотите - на своих страницах.
Если вы хотите узнать об этом больше, я применяю этот и другие эксперименты на моем личном веб-сайте https://willmendesneto.github.io или проверяю запрос на включение, добавляющий эту функцию, в Репозиторий Github моего личного сайта.
И последнее, но не менее важное: это один из различных подходов, которые можно использовать для поддержки темного режима в вашем приложении. В конце концов, самое важное, чем подход, - это добавить его, имея в виду, что:
Это может быть светлый или темный режим, но более того: пусть пользователи выбирают то, что им больше всего подходит.
Надеюсь, вам понравилось это чтение так же, как мне понравилось его писать. Спасибо, что дочитали до конца, и до скорой встречи!
