С момента появления в MacOS Mojave «Темный режим» стал широко распространенным.
Если пользователь выбирает «Темный режим», общие возможности ОС адаптируются для обеспечения согласованного взаимодействия с пользователем.
Многие компании представили темную тему для своих приложений в 2018 году, например Spark, Things 3, Sketch или Ulysses.
Есть веб-сайт, на котором есть исчерпывающий список многих других приложений и веб-сайтов. Https://darkmodelist.com/.
В этом посте я объясню, как и почему вам следует подумать о создании темной темы и для своего веб-сайта.
Октябрь 2019 г. - обновление: Роуленд И. Экемези написал отличную статью о« Темном режиме с упором на Sass».
Темный режим для Интернета
Есть причины, по которым человек может предпочесть темную тему светлой.
- Это снижает нагрузку на глаза при чтении в темноте.
- На темный режим приятно смотреть.
- Это может сэкономить заряд батареи при использовании OLED-экрана.
- Лучше контраст.
- Меньше синего света, что способствует лучшему сну
Разработчики должны создавать программное обеспечение, которое уважает решение пользователя в отношении определенного пользовательского опыта.
Проблема в том, что в настоящее время нет доступного кросс-браузерного API, чтобы определить, включен ли у пользователя «Темный режим». Хотя многие веб-сайты предлагают темную версию, в основном это сводится к настройке «для каждого веб-сайта», которую вы должны активировать.
У Рабочей группы CSS уже есть черновик по внедрению в браузер нативного API для пользовательских настроек.
На сегодняшний день только Safari Technology Preview (выпуск 73) поддерживает медиа-запросы prefers-color-scheme. Это часть Media Queries Level 5, о которой вы можете прочитать здесь.
Октябрь 2019 г. - обновление: Safari `Version 13.0.2` и Chrome 77, насколько мне известно, поддерживают` prefers-color-scheme`.
Как использовать «prefers-color-scheme» сегодня
Скорее всего, ваши пользователи не используют Safari Technology Preview, поэтому вы можете либо дождаться, пока реализация не коснется всех основных браузеров, либо найти другое решение.
Октябрь 2019 г. - Обновление: я решил пойти в другом направлении со своим личным сайтом, и на нем больше нет необязательного темного режима. Всегда темно.
Что касается моего личного веб-сайта, я предпочитаю уважать системные предпочтения пользователя и предлагать разумные настройки по умолчанию.
Если вам случится посетить мой веб-сайт в ночное время, вы увидите темную версию, днем - облегченную версию, однако, если вы используете поддерживаемый браузер, он использует системные настройки.
Мой веб-сайт использует CSS Custom Properties, чтобы сделать цветовую схему легко изменяемой с помощью javascript. Помните о поддержке браузера! Если вам нужно поддерживать старые браузеры, вы можете использовать полифилл.
Далее идет API `window.matchMedia`. Https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia. Он поддерживает программное тестирование медиа-запросов с использованием JavaScript. Также есть полифил, доступный для старых браузеров.
Вы также можете выбрать более простой подход и использовать только CSS.
Заключение
Добавление темного режима на ваш сайт улучшает взаимодействие с пользователем и не требует больших усилий при использовании переменных CSS. Как только поддержка «prefers-color-scheme» появится в основных браузерах, пользователи смогут просматривать ваш веб-сайт в своей предпочтительной цветовой схеме, и вы увидите всплеск веб-сайтов с «темным режимом» по всему Интернету.
Вы можете ознакомиться с исходным кодом моего сайта на Github.
Спасибо за прочтение.