stringtranslate.com

Цветовая гамма «светлое на темном»

Темная тема для GNOME
Версии веб-сайта в обычном режиме отображения (слева) и темном режиме (справа)

Цветовая схема «светлый на темном» , более известная как темный режим, темная тема или ночной режим  — это цветовая схема , в которой используется светлый текст, значки и элементы графического пользовательского интерфейса на темном фоне. Это часто обсуждается с точки зрения дизайна пользовательского интерфейса компьютера и веб-дизайна . Многие современные веб-сайты и операционные системы предлагают пользователю дополнительный режим отображения «светлый на темном».

Некоторые пользователи находят дисплеи в темном режиме более привлекательными и утверждают, что он может снизить нагрузку на глаза . [1] Для отображения белого цвета на полной яркости требуется примерно в шесть раз больше энергии, чем для чистого черного цвета на Google Pixel 2016 года с OLED-дисплеем . [2] Однако обычные светодиодные дисплеи не могут выиграть от снижения энергопотребления. [3] Большинство современных операционных систем поддерживают дополнительную цветовую схему «светлый на темном». [4]

История

Видеоигра Zork работает на ЭЛТ-дисплее «зеленое на черном».

Предшественники современных компьютерных экранов, такие как электронно-лучевые осциллографы, осциллографы и т. д., имели тенденцию строить графики и представлять другой контент в виде светящихся следов на черном фоне.

С появлением компьютерных экранов первоначально пользовательские интерфейсы формировались на электронно-лучевых трубках (ЭЛТ), подобных тем, которые используются в осциллографах или осциллографах. Люминофор обычно был очень темного цвета и ярко загорался, когда на него попадал электронный луч , и казался белым, зеленым, синим или янтарным на черном фоне, в зависимости от люминофора, нанесенного на монохромный экран. Экраны RGB продолжали работать аналогичным образом, используя все включенные лучи для формирования белого цвета.

С появлением телетекста было проведено исследование того, какие первичные и вторичные цвета и комбинации света лучше всего подходят для этого нового средства. [5] Голубой или желтый на черном обычно оказывался оптимальным из палитры черного, красного, зеленого, желтого, синего, пурпурного, голубого и белого.

Противоположный набор цветов, цветовая схема «темный на светлом» , изначально был представлен в текстовых процессорах WYSIWYG для имитации чернил на бумаге и стал нормой.

Microsoft представила темную тему в юбилейном обновлении Windows 10 в 2016 году. [6] В 2018 году Apple последовала ее примеру в macOS Mojave . [7] В сентябре 2019 года в iOS 13 и Android 10 появились темные режимы. [8] [9]

Firefox и Chromium имеют дополнительную темную тему для всех внутренних экранов. Сторонние разработчики также смогут реализовать свои собственные темные темы. [10]

В 2019 году для интерфейсных веб-разработчиков была создана опция «предпочитает цветовую схему» , которая представляет собой свойство CSS , которое сигнализирует о выборе пользователем в своей системе светлой или темной цветовой темы. [11]

Использование энергии

Светлые и темные цветовые схемы требуют меньше энергии для отображения на OLED- дисплеях. Это положительно влияет на срок службы батареи и снижает потребление энергии. [12]

Хотя OLED потребляет около 40% энергии ЖК-дисплея, отображающего преимущественно черное изображение, он может использовать более чем в три раза больше энергии для отображения изображения на белом фоне, например документа или веб-сайта. [13] Это может привести к сокращению срока службы батареи и энергопотребления, если не используется цветовая схема «светлый на темном». Долгосрочное снижение энергопотребления может также продлить срок службы батареи или срок службы дисплея и батареи.

Экономия энергии, которой можно достичь с помощью цветовой схемы «светло-темно», обусловлена ​​тем, как работают OLED-экраны: в OLED-экране каждый субпиксель генерирует свой собственный свет, и он потребляет энергию только при генерации света. Это отличается от того, как работает ЖК-дисплей: в ЖК-дисплее субпиксели либо блокируют, либо пропускают свет от постоянно включенной светодиодной подсветки .

Цветовые схемы « AMOLED Black» (в которых используется чистый черный вместо темно-серого) не обязательно экономят больше энергии, чем другие цветовые схемы «светлое на темном», в которых вместо черного используется темно-серый, поскольку энергопотребление на экране AMOLED снижается пропорционально средняя яркость отображаемых пикселей. Хотя черный AMOLED действительно экономит больше энергии, чем темно-серый, это правда, дополнительная экономия энергии часто незначительна; Черный AMOLED даст дополнительную экономию энергии менее 1%, например, по сравнению с темно-серым, который используется в темной теме официальных приложений Google для Android. [14] В ноябре 2018 года Google подтвердила, что темный режим на Android экономит заряд батареи. [15]

Проблемы с Интернетом

Некоторые утверждают, что цветовая схема со светлым текстом на темном фоне легче читается на экране, поскольку более низкая общая яркость вызывает меньшее утомление глаз. Другие [16] [17] [18] утверждают обратное. Некоторые страницы в Интернете предназначены для белого фона; Ресурсы изображений ( GIF , PNG , SVG , WOFF и т. д.) могут использоваться неправильно, вызывая визуальные артефакты, если темный режим принудительно установлен (а не предназначен для него) с помощью такого плагина, как darkreader.

prefers-colour-schemeВ CSS есть медиа-функция , позволяющая определить, запросил ли пользователь светлую или темную цветовую схему, и предоставить запрошенную цветовую схему. Это можно указать в настройках операционной системы пользователя или в пользовательском агенте . [11] [19]

Пример CSS:

@ media ( предпочитаемая цветовая схема : темная ) { body { цвет : #ccc ; фон : #222 ; } }

Пример JavaScript: [20]

if ( window . matchMedia ( '(предпочитает цветовую схему: темная)' ). соответствует ) { dark (); }

Смотрите также

Рекомендации

  1. ↑ Камминс, Элеонора (21 ноября 2018 г.). «Темный режим безопаснее для глаз и аккумулятора». Популярная наука . Архивировано из оригинала 21 января 2023 года.
  2. ↑ Эмили Прайс (11 ноября 2018 г.). «Используйте темный режим для экономии заряда аккумулятора телефона». Лайфхакер . Проверено 20 марта 2021 г.
  3. ^ Эйсфельд, Генриетта; Кристаллович, Феликс (2020). The Rise of Dark Mode: качественное исследование новой тенденции в дизайне пользовательского интерфейса.
  4. ↑ Мерфи, Дэвид (28 октября 2020 г.). «Примите зло, включив темный режим в каждом приложении». Лайфхакер . Архивировано из оригинала 16 ноября 2020 года . Проверено 15 ноября 2020 г.
  5. ^ Петтерсон, Руна (март 1985 г.). «Использование цветов в телетексте и видеотексе». Исследовательские ворота .
  6. ^ «Самые интересные функции Anniversary Update: мнение пользователей Windows 10» . ПКМир . Проверено 7 августа 2023 г.
  7. ^ «macOS Mojave: темный режим, стеки и многое другое» . МакСлухи . 25 октября 2019 года. Архивировано из оригинала 8 августа 2022 года . Проверено 8 августа 2022 г.
  8. ↑ Хардвик, Тим (6 июня 2019 г.). «Как включить темный режим в iOS 13». МакСлухи . Архивировано из оригинала 8 августа 2022 года . Проверено 8 августа 2022 г.
  9. ↑ Каллахэм, Джон (3 сентября 2019 г.). «Вот как включить режим темной темы Android 10». Администрация Андроида . Архивировано из оригинала 8 августа 2022 года . Проверено 8 августа 2022 г.
  10. ↑ Портер, Джон (3 июня 2019 г.). «Тёмный режим появится в iOS 13». Грань . Проверено 5 июня 2019 г.
  11. ^ ab "предпочитает цветовую схему - CSS: каскадные таблицы стилей" . Веб-документы MDN . Архивировано из оригинала 18 марта 2021 года . Проверено 18 марта 2021 г.
  12. ↑ Готцеген, Гордон (10 ноября 2018 г.). «Использование темного режима Android увеличивает срок службы батареи, подтверждает Google». CNET . Архивировано из оригинала 27 декабря 2022 года.
  13. ^ Стоукс, Джон. (11 августа 2009 г.) В сентябре этого года OLED больше не появится «через три-пять лет». Архивировано 25 января 2012 г. в Wayback Machine . Arstechnica.com. Проверено 4 октября 2011 г.
  14. ↑ Рага, Дилан (27 июня 2019 г.). «Нет, «черный AMOLED» НЕ экономит заряд батареи больше, чем темно-серый». ХДА .
  15. ↑ Уэлч, Крис (2 ноября 2018 г.). «Google подтверждает, что темный режим очень помогает продлить срок службы батареи на Android». Грань .
  16. ↑ Шарма, Адамья (29 июня 2020 г.). «Любите темный режим? Вот почему вы все равно можете его избегать». Администрация Андроида . Архивировано из оригинала 24 сентября 2020 года . Проверено 12 сентября 2020 г.
  17. ↑ Кларк, Лори (30 июля 2019 г.). «Темный режим не так полезен для ваших глаз, как вы думаете». Проводная Великобритания . ISSN  1357-0978 . Проверено 12 сентября 2020 г.
  18. ↑ Будиу, Ралука (2 февраля 2020 г.). «Темный режим или светлый режим: что лучше?». Нильсен Норман Групп . Архивировано из оригинала 14 февраля 2023 года.
  19. ↑ Уолш, Дэвид (28 января 2019 г.). «Предпочитает цветовую схему: CSS Media Query». Блог Дэвида Уолша . Проверено 18 марта 2021 г.
  20. ^ «Window.matchMedia() — Веб-API» . Веб-документы MDN . Архивировано из оригинала 2 марта 2021 года . Проверено 18 марта 2021 г. Метод matchMedia() интерфейса Window возвращает новый объект MediaQueryList, который затем можно использовать для определения того, соответствует ли документ строке медиа-запроса, а также для мониторинга документа, чтобы определить, когда он соответствует (или перестает соответствовать) этому медиа-запросу.