С момента появления в 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.

Спасибо за прочтение.